Home arrow Style Sheets arrow Page 2 - 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 - Defining the Visual Presentation of Pagination Links
(Page 2 of 2 )

To keep things clear and easy to follow, the first pagination template I plan to create here will be very basic. The links will only be decorated with some classic underline effects, a clean typeface and nothing more.

Now that I've said that, please take a close look at the following code fragment. It makes use of the previous web page to implement this initial pagination template:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Creating pagination links with CSS</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background: #FFF;
    font: 0.8em Arial, Helvetica, sans-serif;
    color: #585858;
}
h1 {
    font-size: 3.9em;
    font-weight: bold;
    color: #064BBD;
}
h2 {
    font-size: 2em;
    font-weight: bold;
    color: #064BBD;
}
#wrapper {
    width: 660px;
    margin: 0 auto;
}
ul#pagelinks {
    list-style: none;
    padding: 0;
    margin: 40px 0 20px 153px;
}
ul#pagelinks li {
    display: inline;
    padding: 5px;
}
ul#pagelinks a {
    font-size: 1.3em;
    text-decoration: underline;
    color: #064BBD;
}
ul#pagelinks a:hover {
    color: #478AFA;
}
ul#pagelinks a.current {
    font-weight: bold;
    text-decoration: none;
    color: #064BBD;
}
ul#pagelinks a.previous:hover, ul#pagelinks a.next:hover {
    color: #478AFA;
}
ul#pagelinks a.previous-off, ul#pagelinks a.next-off {
   text-decoration: none;
   color: #9FC2FD;
}
</style>
</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>

The CSS styles attached to the list that wraps the previous pagination section are a breeze to grasp. In simple terms, all that they do is polish the corresponding links by adding a blue foreground color to them, along with a simple underline effect when the cursor hovers over them. This basic styling process generates the following result when viewed on the browser:

There you have it. In a few simple steps, I managed to create a clean pagination template, which looks pretty similar to the one used by Google. Of course, this isn't the most eye-catching template that youíll ever see in your life, but since its implementation was extremely (not to say ridiculously) easy, the result is more than acceptable.

However, there are still a few more templates that I want to show you in this roundup, so that you can play around with them for a while. In the next section Iíll be building a brand new template. This time, it will use a few background colors and borders to improve the look of the pagination links.

Building a Set of Paging Links

As I anticipated in the section that you just read, itís fairly simple to create an entirely different pagination template using the same structural markup defined previously (that's exactly what CSS was designed for, after all). In this case, the new template will also have a clean style, and the code required for its implementation is the following:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Creating pagination links with CSS</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background: #FFF;
    font: 0.8em Arial, Helvetica, sans-serif;
    color: #585858;
}
h1 {
    font-size: 3.9em;
    font-weight: bold;
    color: #B93D00;
}
h2 {
    font-size: 2em;
    font-weight: bold;
    color: #B93D00;
}
#wrapper {
    width: 660px;
    margin: 0 auto;
}
ul#pagelinks {
    list-style: none;
    padding: 4px;
    margin: 40px 0 20px 112px;
}
ul#pagelinks li {
    display: inline;
    padding: 0 1px 0 0;
}
ul#pagelinks a {
    padding: 2px 7px;
    font-size: 1.3em;
    text-decoration: none;
    color: #802900;
    border: 1px solid #B93D00;
}
ul#pagelinks a:hover {
    color: #FFF;
    background: #B93D00;
}
ul#pagelinks a.current {
    background: none;
    font-weight: bold;
    color: #B93D00;
    border: none;
}
ul#pagelinks a.previous:hover, ul#pagelinks a.next:hover {
    color: #FFF;
}
ul#pagelinks a.previous-off, ul#pagelinks a.next-off {
    background: none;
    color: #FFAA82;
    border: 1px solid #FFAA82;
}
</style>
</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>

As I just mentioned, the styles assigned to the above template are fairly simple to grasp. They use some borders and background colors to decorate the pagination links. Even though this process is itself quite straightforward and certainly doesnít expose any particular difficulty, it yields pretty pleasing results.

Take a peek at the following screen capture, which shows how the target links are rendered on screen:    

The overall appearance of this template is slightly more elaborate than the previous one. Not only is it remarkably easy to create a pagination template, but the entire cosmetic process only demanded the use of some familiar CSS properties, which youíve probably used hundreds of times before.

This shows in a nutshell that making your pagination links look appealing is much easier than you might have thought. Thus, now that you have at your disposal some sample templates, feel free to modify them, so they suit your personal taste.  

Closing Remarks

In this first part of a two-part tutorial, I showed in a step-by-step fashion how to create a couple of clean, basic pagination templates, which naturally can be massaged and tweaked to fit more specific requirements. As you saw in the previous examples, the entire construction process didnít require any special CSS skills, as it was reduced to using a few background colors, borders, and so forth.

In the last part, Iíll be developing a pair of additional templates. These will be a bit more elaborate than the earlier ones; theyíll make use of background images, native shadows and even a few rounded corners.

So, stick with my usual piece of advice and donít miss it!


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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