﻿.RadGrid
{
    background-image: url(Img/header.gif);
    background-repeat: repeat-x;
    background-color: #f3f4f0;
}

.RadGrid Table
{
    font-family: Arial, Verdana;
    color: #3d5e63;
}

.RadGrid A
{
    color: #295b62;
}

.RadGridHeader
{
    height: 59px;
    padding: 0px;
    color: #295b62;
    font-weight: bold;
    font-size: 14px;
    padding-left: 4px;
    padding-right: 11px;
}

.RadGridHeader A, .RadGridHeader SPAN
{
    padding-top: 14px;
    display: block;
    text-decoration: none;
    font-weight: bold;
}

.RadGridHeader A:hover
{
    text-decoration: underline;
}

.EditFormHeader
{
    background-color: #ced9c1;
    color: #475c2c;
    height: 18px;
}

.EditFormButtonRow A { FONT-SIZE: 12px; COLOR: darkgreen }

.EditFormHeader TD { FONT-WEIGHT: bold; FONT-SIZE: 12px; PADDING-TOP: 4px; TEXT-ALIGN: center }

.RadGridItem
{
    height: 40px;
    padding-left: 4px;
    font-size: 12px;
    color: #547175;
}

.RadGridItem TD
{
    border-left: 7px solid #d1e2e4;
    border-right: 7px solid #d1e2e4;
}


.FooterStyle
{
    height: 6px;
    line-height: 4px;
    font-size: 0px;
}

.FooterStyle TD
{
    border-left: 7px solid #d2b6c1;
    border-right: 7px solid #d2b6c1;
}

.RadGridEditItem
{
    background-image: url(img/defaultEditItemBg.gif);
    background-repeat: repeat-x;
    padding-left: 4px;
    background-color: #eef2ea;
}

.RadGridSelectedItem
{
    background-image: url(img/defaultSelectedItemBg.gif);
    background-repeat: repeat-x;
    height: 27px;
    padding-left: 4px;
    background-color: #eef2ea;
}

.RadGridPager
{
    background-image: url(img/footer.gif);
    background-repeat: repeat-x;
    height: 51px;
    padding-left: 11px;
    background-color: white;
    vertical-align: bottom;
    color: #b79ea9;
    font-weight: bold;
}

.RadGridPager A
{
    color: #b79ea9;
}

.GroupPanel
{
    background-color: #c4cdc0;
    color: #5a6854;
    width: 100%;
    border-bottom: 1px solid #8d9c87;
}

.GroupPanelItem
{
    background-color: #9fb695;
    border: 1px solid #8d9c87;
    white-space: nowrap;
}

.FormsCaptionStyle
{
    border: 1px solid red;
}

If you applied some of the predefined skins for the control (for example the Default skin), you can easily model the look and feel for the grid's header/footer/pager items through the th.GridHeader_[SkinName], GridFooter_[SkinsName] and GridPager_[SkinName] classes (residing in the RadControls/Grid/Skins/[SkinsName]/Styles.css file). 
Below we present their structure for the Default grid skin: 
th.GridHeader_Default, 
th.ResizeHeader_Default 
{ 
font: bold 10px Verdana, Arial, Sans-serif; 
background: white url('Img/GridHeaderBg.gif') repeat-x bottom; 
border-top: solid 1px #e5e5e5; 
border-bottom: solid 1px #bbb; 
padding-left: 6px; /*more than items to compensate for item borders!*/ 
height: 22px; 
/*add more definitions if needed*/ 
} 
.GridPager_Default td 
{ 
background: white; 
border: solid 1px white; 
border-top: 1px solid #c7c7c7; 
height: 21px; 
color: #999; 
padding-left: 4px; 
/*add more definitions if needed*/ 
} 
.GridFooter_Default td 
{ 
background: #fbfbfb; 
border: solid 1px #fbfbfb; 
border-top: 1px solid #e8e6e6; 
height: 21px; 
color: #666; 
padding-left: 4px; 
/*add more definitions if needed*/ 
} 

Additional details about how to modify the existing grid skins you can find in this article from the product online documentation: 
Modify existing skins 

Moreover, the appearance of the Header, Footer and Pager in Telerik RadGrid can be fully customized using the respective properties of the component - HeaderStyle, FooterStyle and PagerStyle (when no skin is applied). In the paragraph below you will find a code snippets fetched from the ASPX of the page and the Styles.css file (placed in the NET2\Grid\Examples\Styles\HeaderFooterPagerStyles subfolder of the grid installation folder: 

<PagerStyle CssClass="RadGridPager" Mode="NumericPages"></PagerStyle> <HeaderStyle CssClass="RadGridHeader"></HeaderStyle> <FooterStyle CssClass="FooterStyle"></FooterStyle> 

Styles.css 

.RadGridHeader 
{ 
height: 59px; 
padding: 0px; 
color: #819598; 
font-weight: bold; 
font-size: 16px; 
padding-left: 4px; 
} 

.RadGridHeader A, .RadGridHeader SPAN 
{ 
padding-top: 14px; 
display: block; 
text-decoration: none; 
font-weight: bold; 
} 

.RadGridHeader A:hover 
{ 
text-decoration: underline; 
} 

.FooterStyle 
{ 
height: 6px; 
line-height: 4px; 
font-size: 0px; 
} 

.FooterStyle TD 
{ 
border-left: 7px solid #d2b6c1; 
border-right: 7px solid #d2b6c1; 
} 

.RadGridPager 
{ 
background-image: url(img/footer.gif); 
background-repeat: repeat-x; 
height: 51px; 
padding-left: 11px; 
background-color: white; 
vertical-align: bottom; 
color: #b79ea9; 
font-weight: bold; 
} 

.RadGridPager A 
{ 
color: #b79ea9; 
} 

