CSS Pagination
Free Web development courses with real-time projects Start Now!!
CSS paging is a very practical method for indexing various website pages on the home page. You must include some form of pagination on each page of a website with numerous pages. In this article, we will learn about pagination in CSS.
What is pagination in CSS?
The process of dividing a document into pages and assigning numbers to each is known as pagination. In order to make it simple to navigate through a large volume of content, pagination divides several entries or web pages into separate pages. Visitors can essentially browse your material by using pagination links. The CSS pagination technique is an excellent one for indexing different website pages on the home page. You must include some scrolling for each page when your website has a lot of pages.
Typically, the pagination pattern shows the items in a row. We use an <nav> element to markup the collection of items, ensuring that individuals using a terminal emulator can understand the pagination, and then apply CSS to visually present the layout as a row.
The pagination element will often be horizontally positioned beneath the content. Website scrolling is a method of content organization and a popular tool for limiting the quantity of information shown on the screen.
Pagination with arrows in CSS:
You might want to add some kind of navigation to each page if your website has a lot of pages:
<!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 style="color: rgb(255,0,242); font-size:46px">DataFlair</h2>
<ul class="pagination">
<li><a style="font-size:26px" href="tryit.asp-filename=trycss_ex_pagination.html#">«</a></li>
<li><a style="font-size:26px" href="tryit.asp-filename=trycss_ex_pagination.html#">1</a></li>
<li><a style="font-size:26px" class="active" href="tryit.asp-filename=trycss_ex_pagination.html#">2</a></li>
<li><a style="font-size:26px" href="tryit.asp-filename=trycss_ex_pagination.html#">3</a></li>
<li><a style="font-size:26px" href="tryit.asp-filename=trycss_ex_pagination.html#">4</a></li>
<li><a style="font-size:26px" href="tryit.asp-filename=trycss_ex_pagination.html#">5</a></li>
<li><a style="font-size:26px" href="tryit.asp-filename=trycss_ex_pagination.html#">6</a></li>
<li><a style="font-size:26px" href="tryit.asp-filename=trycss_ex_pagination.html#">»</a></li>
</ul>
</body>
</html>Output:
Simple Pagination in CSS:
You might wish to employ pagination if your website has a lot of pages.
<!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <div class="w3-container"> <h2 style="color: rgb(255,0,242); font-size:46px">DataFlair</h2> <div class="w3-bar"> <a href="#" style="font-size:26px" class="w3-button">1</a> <a href="#" style="font-size:26px" class="w3-button">2</a> <a href="#" style="font-size:26px" class="w3-button">3</a> <a href="#" style="font-size:26px" class="w3-button">4</a> <a href="#" style="font-size:26px" class="w3-button">5</a> </div> </div> </body> </html>
Output:
Technology is evolving rapidly!
Stay updated with DataFlair on WhatsApp!!
Pages with Borders:
To give the pagination borders, use the border property.
<!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;
transition: background-color .3s;
border: 1px solid #ddd;
}
ul.pagination li a.active {
background-color: blue;
color: white;
border: 1px solid #4CAF50;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<h2 style="color: rgb(255,0,242); font-size:46px">DataFlair</h2>
<ul class="pagination">
<li><a style="font-size:26px" href="tryit.asp-filename=trycss_ex_pagination_border.html#">«</a></li>
<li><a style="font-size:26px" href="tryit.asp-filename=trycss_ex_pagination_border.html#">1</a></li>
<li><a style="font-size:26px" class="active" href="tryit.asp-filename=trycss_ex_pagination_border.html#">2</a></li>
<li><a style="font-size:26px" href="tryit.asp-filename=trycss_ex_pagination_border.html#">3</a></li>
<li><a style="font-size:26px" href="tryit.asp-filename=trycss_ex_pagination_border.html#">4</a></li>
<li><a style="font-size:26px" href="tryit.asp-filename=trycss_ex_pagination_border.html#">5</a></li>
<li><a style="font-size:26px" href="tryit.asp-filename=trycss_ex_pagination_border.html#">6</a></li>
<li><a style="font-size:26px" href="tryit.asp-filename=trycss_ex_pagination_border.html#">7</a></li>
<li><a style="font-size:26px" href="tryit.asp-filename=trycss_ex_pagination_border.html#">»</a></li>
</ul>
</body>
</html>Output:
Pagination in the Center:
Wrap the pagination in a container element (such as a div) and add text-align:center to centre it.
<!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;
transition: background-color .3s;
border: 1px solid #ddd;
}
ul.pagination li a.active {
background-color: blue;
color: white;
border: 1px solid black;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
div.center {text-align: center;}
</style>
</head>
<body>
<h2 style="color: rgb(255,0,242); font-size:46px">DataFlair</h2>
<div class="center">
<ul class="pagination">
<li><a style="font-size:26px" href="tryit.asp-filename=trycss_ex_pagination_center.html#">«</a></li>
<li><a style="font-size:26px" href="tryit.asp-filename=trycss_ex_pagination_center.html#">1</a></li>
<li><a style="font-size:26px" class="active" href="tryit.asp-filename=trycss_ex_pagination_center.html#">2</a></li>
<li><a style="font-size:26px" href="tryit.asp-filename=trycss_ex_pagination_center.html#">3</a></li>
<li><a style="font-size:26px" href="tryit.asp-filename=trycss_ex_pagination_center.html#">4</a></li>
<li><a style="font-size:26px" href="tryit.asp-filename=trycss_ex_pagination_center.html#">5</a></li>
<li><a style="font-size:26px" href="tryit.asp-filename=trycss_ex_pagination_center.html#">6</a></li>
<li><a style="font-size:26px" href="tryit.asp-filename=trycss_ex_pagination_center.html#">7</a></li>
<li><a style="font-size:26px" href="tryit.asp-filename=trycss_ex_pagination_center.html#">»</a></li>
</ul>
</div>
</body>
</html>Output:
Between-Links Distance:
Adding the margin property will prevent the page links from being grouped, so do that.
<!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;
transition: background-color .3s;
border: 1px solid #ddd;
margin: 0 4px;
}
ul.pagination li a.active {
background-color: blue;
color: white;
border: 1px solid #4CAF50;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<h2 style="color: rgb(255,0,242); font-size:46px">DataFlair</h2>
<ul class="pagination">
<li><a style="font-size:26px" href="tryit.asp-filename=trycss_ex_pagination_margin.html#">«</a></li>
<li><a style="font-size:26px" href="tryit.asp-filename=trycss_ex_pagination_margin.html#">1</a></li>
<li><a style="font-size:26px" class="active" href="tryit.asp-filename=trycss_ex_pagination_margin.html#">2</a></li>
<li><a style="font-size:26px" href="tryit.asp-filename=trycss_ex_pagination_margin.html#">3</a></li>
<li><a style="font-size:26px" href="tryit.asp-filename=trycss_ex_pagination_margin.html#">4</a></li>
<li><a style="font-size:26px" href="tryit.asp-filename=trycss_ex_pagination_margin.html#">5</a></li>
<li><a style="font-size:26px" href="tryit.asp-filename=trycss_ex_pagination_margin.html#">6</a></li>
<li><a style="font-size:26px" href="tryit.asp-filename=trycss_ex_pagination_margin.html#">7</a></li>
<li><a style="font-size:26px" href="tryit.asp-filename=trycss_ex_pagination_margin.html#">»</a></li>
</ul>
</body>
</html>Output:
In this step, we’ll only build the pagination’s foundational website structure. In order to inform the user of the type of content on the following pagination page, we have additionally attached the title property here.
<!DOCTYPE html>
<html>
<head>
<title>
How to make a Pagination
using HTML and CSS ?
</title>
<style>
/* header styling */
h1 {
color: rgb(255,0,242);
}
/* pagination position styling */
.pagination_section {
position: relative;
}
/* pagination styling */
.pagination_section a {
color: black;
padding: 10px 18px;
text-decoration: none;
}
/* hover effect on non-active */
.pagination_section a:hover:not(.active) {
background-color: brown;
color: white;
}
/* pagination hover effect on active*/
a:nth-child(5) {
background-color: blue;
color: white;
}
a:nth-child(1) {
font-weight: bold;
}
a:nth-child(7) {
font-weight: bold;
}
.content {
margin: 50px;
padding: 15px;
width: 700px;
height: 200px;
border: 2px solid black;
}
</style>
</head>
<body>
<center>
<!-- Header and Slogan -->
<h1 style="font-size:46px">DataFlair</h1>
<p style="font-size:26px">Pagination using HTML and CSS</p>
<!-- content in this Section -->
<div class="content">
<h3>Title</h3>
<article>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</article>
</div>
<!-- pagination elements -->
<div class="pagination_section">
<a style="font-size:26px" href="#"><< Previous</a>
<a style="font-size:26px" href="#" title="Page-01">1</a>
<a style="font-size:26px" href="#" title="Page-02">2</a>
<a style="font-size:26px" href="#" title="Page-03">3</a>
<a style="font-size:26px" href="#" title="Page-04" class="active">4</a>
<a style="font-size:26px" href="#" title="Page-05">5</a>
<a style="font-size:26px"href="#">Next >></a>
</div>
</center>
</body>
</html>
Output:
Active and Hoverable Pagination in CSS
Active and hoverable pagination in CSS pagination refers to the styles applied to the current page and pages that the user hovers over, respectively.
.pagination a:hover:not(.active) {background-color: #xxxx;}TheActive pagination styles typically highlight the current page to indicate to the user where they are in the pagination sequence. This can include changing the background color or applying a border or text effect to the current page.
Hoverable pagination styles, on the other hand, are applied when the user hovers over a page button, providing visual feedback to the user that they can interact with that page. This can include changing the button color, adding a shadow effect, or other visual cues.
By applying active and hoverable pagination styles, you can make your pagination more visually appealing and easier to use, improving the user experience for your audience.
Conclusion
The process of separating a document into separate pages, whether they are printed or digital, is known as pagination or paging. We have so far investigated pagination’s function in breaking up large amounts of content into different HTML pages so that the user may simply switch between the information. The pagination class can be applied to HTML components to paganize material. CSS pagination is therefore highly useful when a lot of the content on the Html files can be split up into separate pages.
Did we exceed your expectations?
If Yes, share your valuable feedback on Google
