Do you want to add some style to your pagination links? If so, then the following CSS Codes can help you to do that. The links should be placed inside a DIV (as it is in our example) which can be easily customized. There are cases when some navigation links are not required, such as “next” (when there are no further pages) or “previous” (when the first page is selected). You can hide or place them between the following tags to mark that they are disabled: <span class=”disabled”>Previous</span>.

First Style

<style type="text/css">

<!--
/*
Credits: BitRepository.com
*/

html, body {
background-color: white; 

color: #2B3956;
font-family: Verdana, Arial, Sans-Serif;
font-size: 11px;
text-align: left;
}
/* Pagination DIV */
#pg
{
width: 700px;
background-color: #FFFFFF;

text-align: center;
font-size: 10px;

margin-bottom: 5px;

padding: 10px;
}

/* Pagination Link */

#pg a {
font-size: 10px;
text-decoration: none;
color: #000000;
border: 1px solid #dddddd;
padding: 3px;
-moz-border-radius: 3px;
}

#pg a:hover {
font-size: 10px;
text-decoration: none;
color: #000000;
border: 1px solid #A7A7A7;
background-color: white;
padding: 3px;
-moz-border-radius: 3px;
}

/* Pagination Current Page */

#pg a.current {
font-size: 10px;
text-decoration: none;
color: #000000;
border: 1px solid #336699;
background-color: #F5F7FA;
padding: 3px;
-moz-border-radius: 3px;
}

/* Pagination Disabled Page */

#pg span.disabled {
font-size: 10px;
text-decoration: none;
color: #C6C7C7;
border: 1px solid #C6C7C7;
background-color: white;
padding: 3px;
-moz-border-radius: 3px; // Rounds the corners; Works for Mozilla only
}
-->
</style>

Second style

<style type="text/css">

<!--
/*
Credits: BitRepository.com
*/

html, body {
background-color: white; 

color: #2B3956;
font-family: Verdana, Arial, Sans-Serif;
font-size: 11px;
text-align: left;
}
/* Pagination DIV */
#pg
{
width: 700px;
background-color: #FFFFFF;

text-align: center;
font-size: 10px;

margin-bottom: 5px;

padding: 10px;
}

/* Pagination Link */

#pg a {
font-size: 10px;
text-decoration: none;
color: #000000;
border: 1px solid #83A0C1;
padding: 3px;
-moz-border-radius: 3px;
}

#pg a:hover {
font-size: 10px;
text-decoration: none;
color: #000000;
border: 1px solid #000000;
background-color: white;
padding: 3px;
-moz-border-radius: 3px;
}

/* Pagination Current Page */

#pg a.current {
font-size: 10px;
text-decoration: none;
font-weight: bold;
color: white;
border: 1px solid #0D62C3;
background-color: #0D62C3;
padding: 3px;
-moz-border-radius: 3px;
}

/* Pagination Disabled Page */

#pg span.disabled {
font-size: 10px;
text-decoration: none;
color: #C6C7C7;
border: 1px solid #C6C7C7;
background-color: white;
padding: 3px;
-moz-border-radius: 3px; // Rounds the corners; Works for Mozilla only
}
-->
</style>

Here’s the HTML code that should be used:

<div id="pg">
<span class='disabled'>&laquo; Previous</span>&nbsp;&nbsp;<a class="current"  href='pagination.php?number=1'>1</a>
&nbsp;&nbsp;<a href='pagination.php?number=2'>2</a>

&nbsp;&nbsp;<a href='pagination.php?number=3'>3</a>
&nbsp;&nbsp;<a href='pagination.php?number=4'>4</a>
&nbsp;&nbsp;<a href='pagination.php?number=5'>5</a>

&nbsp;&nbsp;<a href='pagination.php?number=6'>6</a>
&nbsp;&nbsp;<a href='pagination.php?number=7'>7</a>
&nbsp;&nbsp;<a href='pagination.php?number=8'>8</a>

&nbsp;&nbsp;<a href='pagination.php?number=9'>9</a>
&nbsp;&nbsp;<a href='pagination.php?number=10'>10</a>
&nbsp;&nbsp;<a href='pagination.php?number=2'>Next &raquo;</a>

</div>

Note The downloadable archive with the pagination styles also has 2 pages with PHP code that is used for the live demo. This way you can navigate through links and see how the current page is selected/emphasized or how the next and previous links are disabled when you don’t need them anymore.

Do you wish to receive the latest updates as soon as they are posted? Get our RSS Feed or Subscribe to the Newsletter!