Home arrow Style Sheets arrow CSS Pagination Links
STYLE SHEETS

CSS Pagination Links


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.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 5
December 06, 2011
TABLE OF CONTENTS:
  1. · CSS Pagination Links
  2. · Defining the Visual Presentation of Pagination Links

print this article
SEARCH DEVARTICLES

CSS Pagination Links
(Page 1 of 2 )

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">&laquo; 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 &raquo;</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.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials