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=""}) %>

Order IDOrder DateCustomer IDShip Address
109203/3/1998 12:00:00 AMAROUTBrook Farm Stratford St. Mary
109213/3/1998 12:00:00 AMVAFFESmagsloget 45
109223/3/1998 12:00:00 AMHANARRua do Paço, 67
109233/3/1998 12:00:00 AMLAMAI1 rue Alsace-Lorraine
109243/4/1998 12:00:00 AMBERGSBerguvsvägen 8
109253/4/1998 12:00:00 AMHANARRua do Paço, 67
109263/4/1998 12:00:00 AMANATRAvda. de la Constitución 2222
109273/5/1998 12:00:00 AMLACOR67, avenue de l'Europe
109283/5/1998 12:00:00 AMGALEDRambla de Cataluña, 23
109293/5/1998 12:00:00 AMFRANKBerliner Platz 43
109303/6/1998 12:00:00 AMSUPRDBoulevard Tirou, 255
109313/6/1998 12:00:00 AMRICSUStarenweg 5
109323/6/1998 12:00:00 AMBONAP12, rue des Bouchers
109333/6/1998 12:00:00 AMISLATGarden House Crowther Way
109343/9/1998 12:00:00 AMLEHMSMagazinweg 7
109353/9/1998 12:00:00 AMWELLIRua do Mercado, 12
109363/9/1998 12:00:00 AMGREAL2732 Baker Blvd.
109373/10/1998 12:00:00 AMCACTUCerrito 333
109383/10/1998 12:00:00 AMQUICKTaucherstraße 10
109393/10/1998 12:00:00 AMMAGAAVia Ludovico il Moro 22
FirstPrev...45678910111213...NextLast
<%@ 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;}