Apply styles to MvcPager

This sample demonstrate how to apply css styles to MvcPager, code:
<%=Html.Pager(Model,new PagerOptions{PageIndexParameterName="id",CurrentPagerItemWrapperFormatString = "<span class=\"cpb\">{0}</span>",NumericPagerItemWrapperFormatString = "<span class=\"item\">{0}</span>",CssClass = "pages",SeparatorHtml=""}) %>

Sample
View
Controller
CSS Style

Order ID	Order Date	Customer ID	Ship Address
11060	4/30/1998 12:00:00 AM	FRANS	Via Monte Bianco 34
11061	4/30/1998 12:00:00 AM	GREAL	2732 Baker Blvd.
11062	4/30/1998 12:00:00 AM	REGGC	Strada Provinciale 124
11063	4/30/1998 12:00:00 AM	HUNGO	8 Johnstown Road
11064	5/1/1998 12:00:00 AM	SAVEA	187 Suffolk Ln.
11065	5/1/1998 12:00:00 AM	LILAS	Carrera 52 con Ave. Bolívar #65-98 Llano Largo
11066	5/1/1998 12:00:00 AM	WHITC	1029 - 12th Ave. S.
11067	5/4/1998 12:00:00 AM	DRACD	Walserweg 21
11068	5/4/1998 12:00:00 AM	QUEEN	Alameda dos Canàrios, 891
11069	5/4/1998 12:00:00 AM	TORTU	Avda. Azteca 123
11070	5/5/1998 12:00:00 AM	LEHMS	Magazinweg 7
11071	5/5/1998 12:00:00 AM	LILAS	Carrera 52 con Ave. Bolívar #65-98 Llano Largo
11072	5/5/1998 12:00:00 AM	ERNSH	Kirchgasse 6
11073	5/5/1998 12:00:00 AM	PERIC	Calle Dr. Jorge Cash 321
11074	5/6/1998 12:00:00 AM	SIMOB	Vinbæltet 34
11075	5/6/1998 12:00:00 AM	RICSU	Starenweg 5
11076	5/6/1998 12:00:00 AM	BONAP	12, rue des Bouchers
11077	5/6/1998 12:00:00 AM	RATTC	2817 Milton Dr.

First Prev ...78910111213141516Next Last

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master"

Inherits="System.Web.Mvc.ViewPage<PagedList<Order>>" %>

<%@ Import Namespace="Webdiyer.Mvc2Demo.Models"%>

<%@ Import Namespace="Webdiyer.WebControls.Mvc"%>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">

    Apply styles to MvcPager

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Apply styles to MvcPager</h2>

    <div>This sample demonstrate how to apply css styles to MvcPager, code:<br />

    &lt;%=Html.Pager(Model,new PagerOptions{PageIndexParameterName="id",

    CurrentPagerItemWrapperFormatString = "&lt;span class=\"cpb\"&gt;{0}&lt;/span&gt;",

    NumericPagerItemWrapperFormatString = "&lt;span class=\"item\"&gt;{0}&lt;/span&gt;",

    CssClass = "pages",SeparatorHtml=""}) %&gt;

    </div><br />

<table width="98%">

<tr><th>Order ID</th><th>Order Date</th><th>Customer ID</th><th>Ship Address</th></tr>

<%foreach(Order od in Model)

%>

     <tr><td><%=od.OrderID %></td><td><%=od.OrderDate.ToString() %></td>

     <td><%=od.CustomerID %></td><td><%=od.ShipAddress %></td></tr>

<%

 } %>

</table>

 <%=Html.Pager(Model, new PagerOptions { PageIndexParameterName = "id",

    CurrentPagerItemWrapperFormatString = "<span class=\"cpb\">{0}</span>",

    NumericPagerItemWrapperFormatString = "<span class=\"item\">{0}</span>",

    CssClass = "pages", SeparatorHtml = "" })%>

</asp:Content>

        public ActionResult ApplyStyles(int? id)

            using (var db = new MvcPagerDemoDataContext())

                PagedList<Order> orders = db.Orders.ToPagedList(id ?? 1, 20);

                return View(orders);

/*pager style*/

.pages { color:red;font-weight:bold; font-size:11px;}

.pages  .item{padding: 1px 6px;font-size: 13px;} /*numeric pager items*/

.pages .cpb {color:red;padding: 1px 6px;font-size: 13px;} /*current pager item*/

.pages a { text-decoration:none;padding: 0 5px; border: 1px solid #ddd;

           margin:0 2px; color:#000;font-weight:normal;}

.pages a:hover { background-color: #E61636; color:#fff;

                 border:1px solid #E61636; text-decoration:none;font-weight:normal;}