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:

 

 

The next step is to remove the Edit Links Option on 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:

 

 

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

 

Code:

#s4-ribbonrow{
   display:none;
}

Result:

 

 

Remove 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.