Use Custom CSS In SharePoint 2013

Here are the steps:

Open SharePoint team site.

Open SharePoint team site

Open SharePoint designer.

Create a new custom.CSS file under Site Assets.

custom.CSS

Set the alternate CSS URL.

Click site actions, then site settings.

Under look and feel.

Click Masterpage.

Masterpage

In the first step remove the Page title.

customize
Code:

  1. #pageTitle{  
  2.    Display:none;  
  3. }  
Result:

see Result

Next step is to remove Edit Links Option in the page

remove the Page title
Code:
  1. #zz13_TopNavigationMenu_NavMenu_Edit{  
  2.    display:none;  
  3. }  
Result:

Edit Links Option

Remove the left quick links bar.

quick links bar
Code:
  1. #sideNavBox  
  2. {  
  3.    display:none;  
  4. }  
Result:

Remove the left quick links bar

Move the widgets to the left margin.

Code:
  1. #contentBox  
  2. {  
  3.    margin-left:10px;  
  4. }  
Result:

Move the widgets to left margin

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

Set the background color for webpart header, fonts.

Going to set the backgroud

Code:
  1. .ms - webpart - titleText.ms - webpart - titleText, .ms - webpart - titleText > a {  
  2.     background - color: Orange;  
  3.     font - size12 px;  
  4.     font - weight: bold;  
  5.     color: White;  
  6.     padding5 px 5 px;  
  7.     border - top - left - radius: 1e m;  
  8.     border - top - right - radius: 1e m;  
  9. }  
Result:

backgroud color

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

Code:
  1. #s4-ribbonrow{  
  2.    display:none;  
  3. }  
Result:

Result

Remove the another bar.

Code:
  1. #suiteBar  
  2. {  
  3.    Display:none;  
  4. }  
Result:
Remove the another bar

Full code:
  1. #  
  2. pageTitle {  
  3.     Display: none;  
  4. }#  
  5. zz13_TopNavigationMenu_NavMenu_Edit {  
  6.     displaynone;  
  7. }#  
  8. sideNavBox {  
  9.   
  10.     displaynone;  
  11. }#  
  12. contentBox {  
  13.     margin - left: 10 px;  
  14. }  
  15. .ms - webpart - titleText.ms - webpart - titleText, .ms - webpart - titleText > a {  
  16.     background - color: Orange;  
  17.     font - size12 px;  
  18.     font - weight: bold;  
  19.     color: White;  
  20.     padding5 px 5 px;  
  21.     border - top - left - radius: 1e m;  
  22.     border - top - right - radius: 1e m;  
  23. }#  
  24. s4 - ribbonrow {  
  25.     displaynone;  
  26. }#  
  27. suiteBar {  
  28.     Display: none;  
  29. }  
This the of branding the SharePoint page using custom CSS.