Use Custom CSS In SharePoint 2013

Step 1. Open the SharePoint team site.

Step 2. Open SharePoint Designer.

Step 3. Create a new custom.CSS file under Site Assets.

Set the alternate CSS URL.

Step 4. 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

Step 5. The next step is to remove the Edit Links Option on the page

Code

#zz13_TopNavigationMenu_NavMenu_Edit {
    display: none;
}

Result

Step 6. Remove the left quick links bar.

Code

#sideNavBox {
   display: none;
}

Result

Step 7. Move the widgets to the left margin.

Code

#contentBox {
   margin-left: 10px;
}

Result

Step 8. Now remove all the default widgets from the page and add some web parts.

Step 9. Set the background color for the web part header and fonts.

Code

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

Result

Step 10. 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: 10px;
}

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

#s4-ribbonrow {
    display: none;
}

#suiteBar {
    display: none;
}

This is the of branding the SharePoint page using custom CSS.