If you want to extend the functionality of your website with a neat pagination mechanism, but aren't sure of how to give the page links an appealing look, then keep reading this tutorial. In a step-by-step fashion, you’ll learn how to create several ready-to-use pagination templates with only a few straightforward CSS properties. This is the conclusion to a two-part article.
If you've read the first part, you probably have a pretty good idea of how to provide your pagination links with an engaging appearance. In that article I developed a couple of clean templates, which made use of some background colors and borders to polish the link's visual presentation. Even though the properties involved in the styling process were old favorites, which you’ve surely been using for years, they yields results that were more than acceptable.
As I said just a moment ago, my plan here is to put at your disposal a decent variety of pagination templates. This way, you can pick the one that best suits your needs and tastes. Therefore, in this final article I’ll be creating a few additional templates. They'll look a bit more sophisticated than the previous ones, as they’ll decorate the links with background images, rounded corners and even some native shadows.
Ready to continue this hopefully instructive journey in building pagination links with CSS? Then keep reading!
Defining the Pagination Links’ Base Structure
Before I start creating the new set of templates, it’s necessary to define the markup upon which they’ll be seated. Working along the same lines as the examples developed in the preceding article, I’ll be using the same core structure, which was a plain, unordered list.
Having said that, here’s the web page containing the target list. Check it out:
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Creating pagination links with CSS</title> </head> <body> <div id="wrapper"> <header> <h1>Creating pagination links with CSS</h1> <h2>Header section</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </header> <section> <h2>Content section</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo.</p> </section> <footer> <h2>Footer section</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo.</p> <ul id="pagelinks"> <li><a href="#" class="previous">« Previous</a></li> <li><a href="#">1</a></li> <li><a href="#" class="current">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#">8</a></li> <li><a href="#">9</a></li> <li><a href="#" class="next">Next »</a></li> </ul> </footer> </div> </body> </html>
As seen above, the structural markup that I plan to use for building the pagination templates is pretty standard; it's composed of a few links which have been placed inside a list. Since this base structure speaks for itself, I’m not going to bore you with irrelevant details. Instead, it’s time to begin constructing the first of these brand new templates.
Style Sheets 
HTML5 Boilerplate: Working with jQuery and Modernizr
