In this first part of a two-part tutorial, I show how to create a couple of basic paging templates. You can massage and tweak them to fit more specific requirements. As you'll see, the entire construction process does not require any special CSS skills.
The most difficult part of building a pagination system is the logic that must be implemented behind the scenes. In most cases, the tasks of calculating the number of links that will be displayed per page, as well as the amount of pages that will be used to span the corresponding content are performed by some kind of server-side component (even though some JavaScript libraries accomplish this quite decently in the client side).
Of course, you don’t need to reinvent the wheel every time you wish to drop a pagination mechanism onto your web pages. Currently there's a plethora of libraries and frameworks out there that will do the hard work for you. Sooner or later, though, you’ll need to polish the visual styles of the page links that were automatically generated. For some, this can be a real pain, since CSS can't be framed and packed into a black box (especially if you want to keep your markup clean and semantic).
But there's no reason to get upset; making your pagination links look sleek and eye-catching is in fact much easier than you might think. In this two-part tutorial I’ll be setting up a few examples which will show you how to create different pagination templates, so that you can pick the one that best fits your needs and tweak it as you wish.
Ready to learn how to give your pagination links a professional look in a few simple steps? Then jump ahead and begin reading!
Building a Basic CSS Pagination Structure
The first step we must take in the creation of a set of pagination templates will consist of defining the markup for the corresponding links. With this base structure up and running, changing the look of the links will be a breeze to achieve, trust me.
With that said, here’s the web page that I’ll use to build the templates:
<!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>
From the above code, it’s clear to see how the sample pagination links have been structured. They have been wrapped inside an unordered list at the bottom of the web page, and the “previous,” “current” and “next” <a> elements have been assigned classes with the same name, so they can look different from the regular ones.
All in all, having defined the structural base upon which the pagination links rest, it’s time to make them look a bit more attractive. In the next section I’ll be defining some basic styles that will accomplish this task in an approachable manner.
Style Sheets 
/ 5 
