Adding Custom CSS in SharePoint 2010 Master Page

In this post we are going to see how to add custom css in SharePoint 2010 Master Page:

My CSS

body

{

text-align: left;

font-family: Arial, san-serif;

font-size: 11px;

line-height: 1.2em;

color: #000;



}

/* MASTER CSS corev4.css */

.s4-title{

padding:0px 0px 0px 0px;

margin:0px;

min-height:64px;

/* [ReplaceColor(themeColor:"Light2")] */ background-color:#67953F;

word-wrap:break-word;

-ms-word-wrap:break-word;

overflow-x:hidden;

}

.ms-cui-topBar2

{

padding:0px;

margin:0px;

background-color:#5b5c6a;

}

.s4-tn{

padding:0px;

margin:0px;

background-color:#5b5c6a;

}

.s4-titletable

{

background-color:#67953F;

}

.ms-cui-tt-span

{

background-color:#67953F;

color:white!important;

}

.s4-toplinks

{

padding:0px;

background-color:#67953F;

color:white!important;

}

.menu-horizontal

{

display:table;

}

.menu-horizontal .menu-item-text

{

padding-top : 0px;

color : white;

}

.s4-tn li.static > .menu-item{

/* [ReplaceColor(themeColor:"Dark2")] */ color:white;

white-space:nowrap;

border:1px solid transparent;

padding:4px 10px;

height:15px;

vertical-align:middle;

background-color:#67953F;

}

.s4-tn li.static > a:link

{

/* [ReplaceColor(themeColor:"Accent1")] */ color:white;

text-decoration:none;

}

　

.s4-tn li.static > a:hover

{

/* [ReplaceColor(themeColor:"Accent1")] */ color:white;

text-decoration:none;

}



saved this as CustomStyle.css in Style Library. Refer this in css from Master Page

Open your master page in SharePoint Desinger and have a look in the head tag. here we can register our custom css with SharePoint:CssRegistration control. Below i have posted code snippet from my master page.

 <SharePoint:CssLink runat="server" Version="4"/>
 <SharePoint:CssRegistration runat="server" After="Core4.css" Name="/Style Library/CustomStyle.css"></SharePoint:CssRegistration>