How to give CSS Style to web parts

How to give CSS Style to web parts with the most easy way!

 

I will tell you how to give web parts a nice CSS style , just follow the next simple steps

 

First  go to the wanted web part page and get the web part ID , how to do that?

right click on the page and click view source , then CTRL+F to find this "WPQ"

all web parts ID'S ends with WPQ then a number like this " WebPartWPQ4 " 

now , Add a Content Editor web part in the same page and start editing the HTML of it

add this CSS code and notice that its calling teh web part ID so , you can style more than 

one web part in same page by entering the CSS in this Content editor web part

Now here is the code

  <style type="text/css">


    /* === Title bar CSS === */
  
    /* TR - title bar for web part */
  
    #MSOZoneCell_WebPartWPQ2 .ms-WPHeader
    {
background-color:#63afd3;       /* you can change this with image */

    }
  
    /*  H3 - Text in title bar of web part */
    #MSOZoneCell_WebPartWPQ2 .ms-WPTitle A
    {
        font-family: "Cambria";
        color: white;
        font-size: 18pt;
    }
  
    /* TD – Left and right corner cells of title bar */
    #MSOZoneCell_WebPartWPQ2 .ms-wpTdSpace
    {
        width:5px;
    }
  
    /* web part check box of right side */
    #MSOZoneCell_WebPartWPQ2 .ms-WPHeaderCbxHidden
    {
        display: none;
    }
  
    /* === Web part background CSS === */
  
    /*  TD - background for all except the title bar of web part */
  
    .s4-wpcell#MSOZoneCell_WebPartWPQ2
    {
        border-bottom: 1px  solid;
        border-left: 1px solid;
        background-color: white;
        border-top: 1px solid;
        border-right: 1px solid;
    }
  
    /* TD - paging area at the bottom */
    #MSOZoneCell_WebPartWPQ2 .ms-bottompaging TD
    {
        background-color: white;
    }
  
    /* hide the gray line above "add new" link */
    #MSOZoneCell_WebPartWPQ2 .ms-partline
    {
        display: none;
    }
  
    /* selected (clicked) web part background */
    .s4-wpActive#MSOZoneCell_WebPartWPQ2
    {
        border-bottom-color: red;
        background-color: white;
        border-top-color: red;
        border-right-color: red;
        border-left-color: red;
    }
  
    /* === Column headings === */
  
    /* color for sortable column headings */
  
    #MSOZoneCell_WebPartWPQ2 .ms-vh-div A
    {
        color: blue !important;
    }
  
    /* color for non-sortable column headings */
    #MSOZoneCell_WebPartWPQ2 .ms-vh-div
    {
        color: blue !important;
    }
  
    /* === List text CSS === */
  
    /* item description text */
  
    #MSOZoneCell_WebPartWPQ2 .ms-vb2
    {
        color: blue !important;
        font-size: 12pt;
    }
    #MSOZoneCell_WebPartWPQ2.ms-vb-user A
    {
        color: blue !important;
        font-size: 12pt;
    }
    #MSOZoneCell_WebPartWPQ2 .ms-vb-title A
    {
        color: blue !important;
        font-size: 12pt;
    }
  
    /*  TR - alternating rows of web part */
    #MSOZoneCell_WebPartWPQ2 .ms-alternating
    {
        background-color: white;
    }
</style>


Save your work and love to see your comments!