Grid / Styling Header, Footer and Pager

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;
}