For indexing different pages of a website on the homepage especially when there are lots of pages, the CSS pagination is used to add some sort of pagination to each page. Below we are discussing the different types of pagination.
Basic Pagination:
To use pagination class to an <ul> element the basic pagination is used which is the simplest and the most basic kind of pagination.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: inline-block;
}
.pagination a {
color: red;
float: left;
padding: 10px 20px;
text-decoration: none;
}
</style>
</head>
<body>
<h2>Basic Pagination</h2>
<div class="pagination">
<a href="#">A</a>
<a href="#">B</a>
<a href="#">C</a>
<a href="#">D</a>
<a href="#">E</a>
<a href="#">F</a>
</div>
</body>
</html>
Explanation:
In the above example, we are using the CSS pagination to display the behavior and working of a basic pagination.
Basic Pagination with an arrow:
When there are lots of pages, this pagination is used to use an arrow for the previous and next pages.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: inline-block;
}
.pagination a {
color: red;
float: left;
padding: 10px 20px;
text-decoration: none;
}
</style>
</head>
<body>
<h2>Basic Pagination</h2>
<div class="pagination">
<a href="#">«</a>
<a href="#">A</a>
<a href="#">B</a>
<a href="#">C</a>
<a href="#">D</a>
<a href="#">E</a>
<a href="#">F</a>
<a href="#">»</a>
</div>
</body>
</html>
Explanation:
In the above example, we are using the CSS pagination to display the behavior and working of a basic pagination with an arrow.
Active/Current link and Hoverable Pagination:
The .active class, and the :hover selector are used to highlight the current page. The color of each page link is also changed when the mouse is moved over them.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: inline-block;
}
.pagination a {
color: red;
float: left;
padding: 10px 20px;
text-decoration: none;
}
.pagination a.active {
background-color: crimson;
color: white;
}
.pagination a:hover:not(.active) {background-color: yellow;}
</style>
</head>
<body>
<h2>Active and Hoverable Pagination</h2>
<div class="pagination">
<a href="#">«</a>
<a href="#">A</a>
<a class="active" href="#">B</a>
<a href="#">C</a>
<a href="#">D</a>
<a href="#">E</a>
<a href="#">F</a>
<a href="#">»</a>
</div>
</body>
</html>
Explanation:
In the above example, we are using the CSS pagination to display the behavior and working of an Active/Current link and Hoverable Pagination.
Rounded Active and Hoverable Pagination:
To get the rounded “active” and “hover” buttons, the border-radius property is used.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: inline-block;
}
.pagination a {
color: red;
float: left;
padding: 10px 20px;
text-decoration: none;
}
.pagination a.active {
background-color: crimson;
color: white;
border-radius: 10px;
}
.pagination a:hover:not(.active) {
background-color: yellow;
border-radius: 10px;}
</style>
</head>
<body>
<h2>Rounded Active and Hoverable Pagination</h2>
<div class="pagination">
<a href="#">«</a>
<a href="#">A</a>
<a class="active" href="#">B</a>
<a href="#">C</a>
<a href="#">D</a>
<a href="#">E</a>
<a href="#">F</a>
<a href="#">»</a>
</div>
</body>
</html>
Explanation:
In the above example, we are using the CSS pagination to display the behavior and working of a rounded active and hoverable Pagination.
Bordered Pagination:
Borders can be added to the pagination using the border property.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 10px 20px;
text-decoration: none;
transition: background-color .3s;
border: 2px solid yellow;
}
.pagination a.active {
background-color: crimson;
color: white;
border: 2px solid blue;
}
.pagination a:hover:not(.active) {background-color: black;
color: white;}
</style>
</head>
<body>
<h2>Bordered Pagination</h2>
<div class="pagination">
<a href="#">«</a>
<a href="#">A</a>
<a class="active" href="#">B</a>
<a href="#">C</a>
<a href="#">D</a>
<a href="#">E</a>
<a href="#">F</a>
<a href="#">»</a>
</div>
</body>
</html>
Explanation:
In the above example, we are using the CSS pagination to display the behavior and working of a bordered Pagination.
Rounded Border Pagination:
To add rounded borders to the first and the last link of pagination, the Rounded Border Pagination method is used.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 10px 20px;
text-decoration: none;
border: 2px solid yellow;
}
.pagination a.active {
background-color: crimson;
color: white;
border: 2px solid blue;
}
.pagination a:hover:not(.active) {background-color: black;
color: white;}
.pagination a:first-child {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.pagination a:last-child {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
</style>
</head>
<body>
<h2>Bordered Pagination</h2>
<div class="pagination">
<a href="#">«</a>
<a href="#">A</a>
<a class="active" href="#">B</a>
<a href="#">C</a>
<a href="#">D</a>
<a href="#">E</a>
<a href="#">F</a>
<a href="#">»</a>
</div>
</body>
</html>
Explanation:
In the above example, we are using the CSS pagination to display the behavior and working of a rounded border Pagination.
Space Between Pagination:
To get the space between the links in the pagination, the margin property is used.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 10px 20px;
text-decoration: none;
transition: background-color .3s;
border: 2px solid green;
margin: 0 4px;
}
.pagination a.active {
background-color: crimson;
color: white;
border: 2px solid blue;
}
.pagination a:hover:not(.active) {background-color: black;
color: white;}
</style>
</head>
<body>
<h2>Space Between Pagination</h2>
<div class="pagination">
<a href="#">«</a>
<a href="#">A</a>
<a class="active" href="#">B</a>
<a href="#">C</a>
<a href="#">D</a>
<a href="#">E</a>
<a href="#">F</a>
<a href="#">»</a>
</div>
</body>
</html>
Explanation:
In the above example, we are using the CSS pagination to display the addition of the space between Pagination.
Pagination Size:
The font-size property is used to change the size of the pagination.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 10px 20px;
text-decoration: none;
transition: background-color .3s;
border: 2px solid green;
font-size: 25px;
}
.pagination a.active {
background-color: crimson;
color: white;
border: 2px solid blue;
}
.pagination a:hover:not(.active) {background-color: black;
color: white;}
</style>
</head>
<body>
<h2>Pagination Size</h2>
<div class="pagination">
<a href="#">«</a>
<a href="#">A</a>
<a class="active" href="#">B</a>
<a href="#">C</a>
<a href="#">D</a>
<a href="#">E</a>
<a href="#">F</a>
<a href="#">»</a>
</div>
</body>
</html>
Explanation:
In the above example, we are changing the size of the Pagination.
Centered Pagination:
For pagination to be kept at the center of a web page, a container element needs to be wrapped around it (like), and the text-align: center property should be used.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
}
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 10px 20px;
text-decoration: none;
transition: background-color .3s;
border: 2px solid green;
}
.pagination a.active {
background-color: crimson;
color: white;
border: 2px solid blue;
}
.pagination a:hover:not(.active) {background-color: black;
color: white;}
</style>
</head>
<body>
<h2>Centered Pagination</h2>
<div class="center">
<div class="pagination">
<a href="#">«</a>
<a href="#">A</a>
<a class="active" href="#">B</a>
<a href="#">C</a>
<a href="#">D</a>
<a href="#">E</a>
<a href="#">F</a>
<a href="#">»</a>
</div>
</div>
</body>
</html>
Explanation:
In the above example, we are using the CSS pagination to display the behavior and working of the centered Pagination.
Previous/Next and Navigation Pagination:
Pagination can also be added for a previous/next button and also for navigation purposes.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
}
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 10px 20px;
text-decoration: none;
transition: background-color .3s;
border: 1px solid green;
}
.pagination a.active {
background-color: crimson;
color: white;
border: 1px solid blue;
}
.pagination a:hover:not(.active) {background-color: black;
color: white;}
</style>
</head>
<body>
<h2>Next/Previous buttons:</h2>
<div class="pagination">
<a href="#">❮</a>
<a href="#">❯</a>
</div>
<h2>Navigation pagination:</h2>
<div class="pagination">
<a href="#" class="active">Home</a>
<a href="#">A</a>
<a href="#">B</a>
<a href="#">C</a>
</div>
</body>
</html>
Explanation:
In the above example, we are using the CSS pagination to display the behavior and working of the Previous/Next and Navigation Pagination.
Breadcrumb Pagination:
Breadcrumb pagination can be understood as a special type of pagination.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
ul.breadcrumb {
padding: 10px 20px;
list-style: none;
background-color: yellow;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {
padding: 10px;
color: red;
content: "/\00a0";
}
ul.breadcrumb li a {color: blue;}
</style>
</head>
<body>
<h2>Breadcrumb Pagination</h2>
<ul class="breadcrumb">
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li>D</li>
</ul>
</body>
</html>
Explanation:
In the above example, we are using the CSS pagination to display the behavior and working of the breadcrumb Pagination.