Use Custom CSS In SharePoint 2013

Here are the steps:

Open SharePoint team site.



Open SharePoint designer.

Create a new custom.CSS file under Site Assets.



Set the alternate CSS URL.

Click site actions, then site settings.

Under look and feel.

Click Masterpage.



In the first step remove the Page title.


Code:

#pageTitle{
   Display:none;
}

Result:



Next step is to remove Edit Links Option in the page


Code:

#zz13_TopNavigationMenu_NavMenu_Edit{
   display:none;
}

Result:



Remove the left quick links bar.


Code:

#sideNavBox
{
   display:none;
}

Result:



Move the widgets to the left margin.

Code:

#contentBox
{
   margin-left:10px;
}

Result:



Now remove all the default widgets from the page and add some webparts.

Set the background color for webpart header, fonts.



Code:

.ms - webpart - titleText.ms - webpart - titleText, .ms - webpart - titleText > a {
    background - color: Orange;
    font - size: 12 px;
    font - weight: bold;
    color: White;
    padding: 5 px 5 px;
    border - top - left - radius: 1e m;
    border - top - right - radius: 1e m;
}

Result:



Next one is to remove the browse, follow and share from the top ribbon.

Code:

#s4-ribbonrow{
   display:none;
}

Result:



Remove the another bar.

Code:

#suiteBar
{
   Display:none;
}

Result:


Full code:

#
pageTitle {
    Display: none;
}#
zz13_TopNavigationMenu_NavMenu_Edit {
    display: none;
}#
sideNavBox {

    display: none;
}#
contentBox {
    margin - left: 10 px;
}
.ms - webpart - titleText.ms - webpart - titleText, .ms - webpart - titleText > a {
    background - color: Orange;
    font - size: 12 px;
    font - weight: bold;
    color: White;
    padding: 5 px 5 px;
    border - top - left - radius: 1e m;
    border - top - right - radius: 1e m;
}#
s4 - ribbonrow {
    display: none;
}#
suiteBar {
    Display: none;
}

This the of branding the SharePoint page using custom CSS.