You can see pagination in hard or soft copy of books, documents etc.. Pagination also called paging.

This post is about creating and designing pagination using HTML and CSS.

Precap

• Definition

• Structure of pagination

• Styles of pagination

• Breadcrumbs

What is pagination?

Pagination is the process of assigning page numbers to document or books at header or footer.

Pagination in web development

In web development, pagination divides content of website into discrete pages. Users can access specific section or content by clicking page numbers display at bottom.

Structure of pagination with HTML

Let’s, first create structure of pagination. To create pagination I used group of <span> elements. In between <span> elements anchor tag is defined to apply link on page numbers. At first and last arrow specifies previous and next pages respectively.

Below is the HTML code and output of pagination.

<!DOCTYPE html>
<html>
<head>
<title>Pagination</title>
</head>
<body>
<article>
<h2>What is pagination?</h2>
<p>pagination is process of asssign page number to each page of book or document.</p>
</article>
<div class="paging">
<span><a href="#" ><<</a></span>
<span><a href="#" >1</a></span>
<span><a href="#" >2</a></span>
<span><a href="#" >3</a></span>
<span><a href="#" >4</a></span>
<span><a href="#" >5</a></span>
<span><a href="#" >>></a></span>
</div>
</body>
</html>

Output:-

HTML structure of pagination

Different styles of pagination using CSS

Simple pagination

This is simple design with CSS. Here I simply remove underline from the links and add border and padding to <article> element.

article{
height:100px;
width:300px;
border:3px groove #666666;
padding:10px;
}
a{
text-decoration:none;
}

Output:-

Simple pagination

Bordered pagination

Using border property you can also add borders to pagination. With borders square box is added to each page numbers.

span{
padding:10px;
border:2px solid #ccc;
}

Output:-

Bordered pagination

Rounded border pagination

To make border corners in round shape use border-radius property. You can set border-radius property either for all span elements or only some selected elements. Here I sets border-radius property to first and last span elements.

.paging span:first-child {
border-radius:5px 0px 0px 5px;}
.paging span:last-child {
border-radius:0px 5px 5px 0px;}

Output:-

Rounded border pagination

Pagination links with padding

Now to make pagination looks pretty add padding to each page numbers. Which adds space between the page numbers and it’s borders and also add top margin to add space between content and pagination.

.paging{
margin-top:50px;
}
span{
padding:10px;
}

Output:-

Pagination links with padding

Pagination size

Use font-size property to change size of fonts of pagination.

1
2
3

a{
font-size:22px;
}

Output:-

Pagination size

Pagination position

Use margin properties to set position of pagination. Here I used margin-top and margin-left properties to set position at center.

article{
height:100px;
width:300px;
margin-top:200px;
margin-left:500px;
border:3px groove #666666;
padding:10px;
}
.paging{
margin-left:515px;
margin-top:50px;
}

Output:-

Pagination position (center)

Active and hoverable pagination

You can also add hover effect and active page with :hover pseudo-class. This looks like navigation menu.

span:hover:not(.active){
background-color:#009900;
}
.active{
background-color:#FF0000;
}

Output:-

Active and hoverable pagination

Pagination with Transition effect

When you hover on page numbers it’s background color instantly appears, using transition property you can set timing of background color appearance.

1
2
3

span{
transition:background-color 2s;
}

Output:-

Here is the complete code

HTML

<!DOCTYPE html>
<html>
<head>
<title>Pagination</title>
<link rel="stylesheet" href="pagination.css">
</head>
<body>
<article>
<h2>What is pagination?</h2>
<p>pagination is process of asssign page number to each page of book or document.</p>
</article>
<div class="paging">
<span><a href="#" ><<</a></span>
<span class="active"><a href="#" >1</a></span>
<span><a href="#" >2</a></span>
<span><a href="#" >3</a></span>
<span><a href="#" >4</a></span>
<span><a href="#" >5</a></span>
<span><a href="#" >>></a></span>
</div>
</body>
</html>

CSS

article{
height:100px;
width:300px;
margin-top:200px;
margin-left:500px;
border:3px groove #666666;
padding:10px;
}
.paging{
margin-left:515px;
margin-top:50px;
}
a{
text-decoration:none;
font-size:22px;
}
span{
padding:10px;
border:2px solid #ccc;
transition:background-color 2s;
}

.paging span:first-child {
border-radius:5px 0px 0px 5px;}
.paging span:last-child {
border-radius:0px 5px 5px 0px;}
span:hover:not(.active){
background-color:#009900;
}
.active{
background-color:#FF0000;
}

Pagination with Previous/Next buttons

Previous/Next buttons takes you forward and backward from the current page.

<!DOCTYPE html>
<html>
<head>
<title>pagination buttons</title>
<style>
.btn{
height:auto;
width:auto;
background-color:#03c;
text-align:center;
padding:5px;
}
a{
text-decoration:none;
font-size:20px;
}
span{
background-color:#ccc;
border:3px solid #333;
padding:1px;}
span:hover{
background-color:#000;
}
</style>
</head>
<body>
<div class="btn">
<span><a href="#" >Previous</a></span>
<span><a href="#" >Next</a></span>
</div>
</body>
</html>

Output:-

Next/previous buttons pagination

Breadcrumbs pagination

Breadcrumbs pagination is another variant of pagination. Breadcrumbs specifies current page location of user. Thus user exactly know that where he/she is.

<!DOCTYPE html>
<html>
<head>
<title>breadcrumbs</title>
<style>
.breadcrumb{
margin-top:100px;
background-color:#ccc;
width:auto;
height:auto;
border-radius:10px;
text-align:center;}
a{
text-decoration:none;
font-size:20px;}
span{
padding:3px;
}
.breadcrumb span+span:before{
content:"/\00a0";
color:#333;
padding:3px;
}
.active{
background-color:#ff0000;}
span a:hover:not(.active){
background-color:#00FF00;}
</style>
</head>
<body>
<div class="breadcrumb">
<span><a href="#" class="active">Home</a></span>
<span><a href="#" >Gallary</a></span>
<span><a href="#" >Images</a></span>
<span>flower</span>
</div>
</body>
</html>

Output:-

Breadcrumbs pagination

Benefits of pagination

Makes easier way for user to jump on the page they want to view.
Faster load time.
User knows where they are.
Users can look how many pages are left.

Conclusion

Using CSS you can creates different types of pagination. Breadcrumbs pagination is more accurate than normal pagination. Pagination mainly used for electronic document to split content on different pages , For search results pages,etc..

For example, Google search.