Step 1. Open the SharePoint team site.

Open SharePoint team site

Step 2. Open SharePoint Designer.

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

Custom.CSS

Set the alternate CSS URL.

Step 4. Click site actions, then site settings.

Under look and feel.

Click Masterpage.

Masterpage

In the first step remove the Page title.

Customize

Code

CSS
#pageTitle {
   display: none;
}

Result

See Result

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

Remove the Page title

Code

CSS
#zz13_TopNavigationMenu_NavMenu_Edit {
    display: none;
}

Result

Edit Links Option

Step 6. Remove the left quick links bar.

Quick links bar

Code

CSS
#sideNavBox {
   display: none;
}

Result

Remove the left quick links bar

Step 7. Move the widgets to the left margin.

Code

C#
#contentBox {
   margin-left: 10px;
}

Result

Move the widgets to left margin

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.

Going to set the backgroud

Code

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

Backgroud color

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

Code

CSS
#s4-ribbonrow {
   display: none;
}

Result

Result

Remove another bar.

Code

CSS
#suiteBar {
   display: none;
}

Result

Remove the another bar

Full code

CSS
#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.