How to apply css to a web part in share point 2013/Office 365

How to apply css to a particular web part in share point 2013/ office 365 using share point designer 2013

you need to find a web part id in order to apply css to that particular web part.

open that page right click on the page select View page source

search for MSOZoneCell_WebPartWPQ and there will be an id associated with it. for example,

MSOZoneCell_WebPartWPQ2, MSOZoneCell_WebPartWPQ3 etc so lets consider you want to apply css to the web part having id MSOZoneCell_WebPartWPQ2


Now, edit that page with share point designer 2013





Open page with advanced mode.




search for this code:



after

.s4-ca{margin-left:0px;
}

copy paste following code (remember, you can always change it as per your need !)

#MSOZoneCell_WebPartWPQ2 .ms-webpart-chrome-title
{
background: rgba(73,155,234,1);
background: -moz-linear-gradient(left, rgba(73,155,234,1) 0%,
rgba(255,255,255,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%,
rgba(73,155,234,1)), color-stop(100%, rgba(255,255,255,1)));
background: -webkit-linear-gradient(left, rgba(73,155,234,1) 0%,
rgba(255,255,255,1) 100%);
background: -o-linear-gradient(left, rgba(73,155,234,1) 0%, rgba(255,255,255,1)
100%);
background: -ms-linear-gradient(left, rgba(73,155,234,1) 0%, rgba(255,255,255,1)
100%);
background: linear-gradient(to right, rgba(73,155,234,1) 0%, rgba(255,255,255,1)
100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea',
endColorstr='#ffffff', GradientType=1 );
font-size: 15px;  
font-weight: bold;
color: white;
padding: 5px 5px;
border: 0.1em yellow;
 border-top-left-radius: 1em;
-moz-border-radius: 0.3em;
-webkit-border-radius: 0.3em;
display:block;
//your css styling goes here
}

save and click on preview in browser . you are done !

here is the result-

  

How to reduce extra space between web parts in share point .

blog 3 :

hello everyone !


people working on share point 2013, have you ever noticed there is a extra space between two web parts ? 
annoying , isn't it !? well ,we have a solution for that. just a little CSS  code and you can reduce that extra space very easily. lets start !

Problem: reduce space/gap between two web parts. 

Solution :  

a. Add a content editor Web Part(CWEP) to your page. (if you don't know how to add content editor, click here)
b. paste the following code into the HTML Editor ,and you are done!

<style type="text/css">
     .ms-webpartPage-root {
         border-spacing: 0px !important;
     }
       .ms-webpartzone-cell {
         margin: 0px !important;
     }
</style>