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>