In this article I will explain with an example, how to style the GridView default Pager using CSS Class Styles in ASP.Net.
 
 

Database

This example uses Northwind database. You can download it using the link given below.
Install Microsoft Northwind and Pubs Sample databases in SQL Server Management Studio
 
 

HTML Markup

The HTML Markup consists of:
GridView - For displaying data.

Columns

There are three BoundField columns for displaying the fields.
<asp:GridView ID="gvCustomers" HeaderStyle-BackColor="#3AC0F2"
    RowStyle-BackColor="#A1DCF2" AlternatingRowStyle-BackColor="White" AlternatingRowStyle-ForeColor="#000"
    runat="server" AutoGenerateColumns="false" AllowPaging="true" OnPageIndexChanging="OnPageIndexChanging">
    <Columns>
        <asp:BoundField DataField="ContactName" HeaderText="Contact Name" ItemStyle-Width="150px" />
        <asp:BoundField DataField="City" HeaderText="City" ItemStyle-Width="100px" />
        <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="100px" />
    </Columns>
    <PagerStyle HorizontalAlign="Right" CssClass="GridPager" />
</asp:GridView>
 
 

Namespaces

You will need to import the following namespaces.
using System.Data;
using System.Data.SqlClient;
using System.Web.UI.WebControls;
 
 

Binding the GridView

Inside the Page_Load event handler, the BindGrid method is called.
Inside the BindGrid method, first the connection string is read from the Web.Config file.
Note: For more details on how to read connection string from Web.Config file, please refer my article Read or Write Connection Strings in Web.Config file using ASP.Net using C# and VB.Net.
 
Then, the records are fetched from the Customers Table of SQL Server database using SqlDataAdapter and copied to DataTable object using Fill method.
Finally, the DataTable is assigned to the DataSource property of GridView and the GridView is populated.
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        this.BindGrid();
    }
}
 
private void BindGrid()
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT CustomerId, ContactName, City, Country FROM Customers"))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                using (DataTable dt = new DataTable())
                {
                    sda.Fill(dt);
                    gvCustomers.DataSource = dt;
                    gvCustomers.DataBind();
                }
            }
        }
    }
}
 
 

Implement Paging in GridView

Inside the OnPageIndexChanging event handler, the PageIndex property of the GridView is set with the new PageIndex and the BindGrid method is called.
protected void OnPageIndexChanging(object sender, GridViewPageEventArgs e)
{
    gvCustomers.PageIndex = e.NewPageIndex;
    this.BindGrid();
}
 
 

Styling the GridView Pager

In order to style the GridView Pager you need to follow the following
1. Add the following CSS classes to the page or the CSS file.
<style type="text/css">
    body
    {
        font-family: Arial;
        font-size: 10pt;
    }
    .GridPager a, .GridPager span
    {
        display: block;
        height: 15px;
        width: 15px;
        font-weight: bold;
        text-align: center;
        text-decoration: none;
    }
    .GridPager a
    {
        background-color: #f5f5f5;
        color: #969696;
        border: 1px solid #969696;
    }
    .GridPager span
    {
        background-color: #A1DCF2;
        color: #000;
        border: 1px solid #3AC0F2;
    }
</style>
 
2. Next you need to assign the Pager CSS Class to the Page using the PagerStyle-CssClass property as shown below
<PagerStyle HorizontalAlign="Right" CssClass="GridPager" />
 
 

Screenshot

GridView before Pager Styling

Styling ASP.Net GridView Pager using CSS Style example
 

GridView before Pager Styling

Styling ASP.Net GridView Pager using CSS Style example
 
 

Demo

View Demo
 
 

Downloads

Download Code