CSS pagination is an effective method for organizing multiple pages of a website directly on the main page. When a website contains numerous pages, implementing pagination becomes necessary for each page.
Following are the different types of pagination:
Basic Pagination
This represents a basic form of pagination. You must employ the pagination class within an HTML element to achieve this pagination.
See this example:
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style>
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
</style>
</head>
<body>
<h2>Basic Pagination</h2>
<ul class="pagination">
<li><a href="#">1</a></li>
<li><a class="active" href="#">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>
</ul>
</body>
</html>
Basic Pagination with arrow
This pagination method is employed when dealing with a large number of pages. It enables the use of arrow icons for navigating to the previous and next pages.
See this example:
<!DOCTYPE html>
<html>
<head>
<style>
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
</style>
</head>
<body>
<h2>Basic Pagination with arrow</h2>
<ul class="pagination">
<li><a href="#">?</a></li>
<li><a href="#">1</a></li>
<li><a class="active" href="#">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="#">?</a></li>
</ul>
</body>
</html>
Active/Current link and Hoverable Pagination
This paging system is employed to emphasize the current page and adjust the color of each page link upon hovering over them. The implementation involves utilizing the .active class along with the :hover selector to achieve this visual effect.
See this example:
<!DOCTYPE html>
<html>
<head>
<style>
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
ul.pagination li a.active {
background-color: brown;
color: white;
}
ul.pagination li a:hover:not(.active) {background-color: lightpink;}
</style>
</head>
<body>
<h2>Active and Hoverable Pagination</h2>
<p>Move the mouse over the numbers.</p>
<ul class="pagination">
<li><a href="#">?</a></li>
<li><a href="#">1</a></li>
<li><a class="active" href="#">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="#">?</a></li>
</ul>
</body>
</html>
Rounded Active and Hoverable Pagination
In this pagination design, the border-radius property is employed to achieve rounded edges for the "active" and "hover" buttons.
See this example:
<!DOCTYPE html>
<html>
<head>
<style>
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
border-radius: 5px;
}
ul.pagination li a.active {
background-color: brown;
color: white;
border-radius: 5px;
}
ul.pagination li a:hover:not(.active) {background-color: lightpink;}
</style>
</head>
<body>
<h2>Rounded Active and Hover Buttons</h2>
<ul class="pagination">
<li><a href="#">?</a></li>
<li><a href="#">1</a></li>
<li><a class="active" href="#">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="#">?</a></li>
</ul>
</body>
</html>
Bordered Pagination
In this pagination system, the border property is employed to incorporate borders around the pagination elements.
See this example:
<!DOCTYPE html>
<html>
<head>
<style>
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
border: 1px solid black;
}
ul.pagination li a.active {
background-color: brown;
color: white;
border: 1px solid grey;
}
ul.pagination li a:hover:not(.active) {background-color: lightpink;}
</style>
</head>
<body>
<h2>Bordered Pagination</h2>
<ul class="pagination">
<li><a href="#">?</a></li>
<li><a href="#">1</a></li>
<li><a class="active" href="#">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="#">?</a></li>
</ul>
</body>
</html>
Rounded Border Pagination
This pagination technique is employed to include curved borders to the initial and final links of the pagination.
See this example:
<!DOCTYPE html>
<html>
<head>
<style>
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
border: 1px solid black;
}
.pagination li:first-child a {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.pagination li:last-child a {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
ul.pagination li a.active {
background-color: brown;
color: white;
border: 1px solid grey;
}
ul.pagination li a:hover:not(.active) {background-color: lightpink;}
</style>
</head>
<body>
<h2>Pagination with Rounded Borders</h2>
<ul class="pagination">
<li><a href="#">?</a></li>
<li><a href="#">1</a></li>
<li><a class="active" href="#">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="#">?</a></li>
</ul>
</body>
</html>
Space Between Pagination
The margin attribute is utilized to determine the distance between the links within the pagination.
See this example:
<!DOCTYPE html>
<html>
<head>
<style>
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
border: 1px solid black;
margin: 0 4px;
}
ul.pagination li a.active {
background-color: brown;
color: white;
border: 1px solid grey;
}
ul.pagination li a:hover:not(.active) {background-color: lightpink;}
</style>
</head>
<body>
<h2>Space Between Pagination</h2>
<ul class="pagination">
<li><a href="#">?</a></li>
<li><a href="#">1</a></li>
<li><a class="active" href="#">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="#">?</a></li>
</ul>
</body>
</html>
Pagination Size
You have the ability to adjust the pagination size by utilizing the font-size property.
See this example:
<!DOCTYPE html>
<html>
<head>
<style>
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
border: 1px solid black;
font-size: 22px;
}
ul.pagination li a.active {
background-color: brown;
color: white;
border: 1px solid grey;
}
ul.pagination li a:hover:not(.active) {background-color: lightpink;}
</style>
</head>
<body>
<h2>Pagination Size</h2>
<p>Change the font-size property to make the pagination smaller or bigger.</p>
<ul class="pagination">
<li><a href="#">?</a></li>
<li><a href="#">1</a></li>
<li><a class="active" href="#">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="#">?</a></li>
</ul>
</body>
</html>
Centered Pagination
You need to enclose it within a container element (such as ```
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
</head>
<body>
<h2>Basic Pagination</h2>
</body>
</html>
See this example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Centered Pagination</h2>
</body>
</html>
## Previous/Next and Navigation Pagination
You have the option to implement pagination for the previous and next buttons as well as for navigation purposes.
See this example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p><strong>Next/Previous buttons:</strong></p>
<p><strong>Navigation pagination:</strong></p>
</body>
</html>
## Breadcrumb Pagination
A unique form of pagination is referred to as breadcrumb pagination.
See this example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>C# Tutorial</h2>
<p><strong>Note:</strong>This is an example of Breadcrumb pagination.</p>
</body>
</html>