Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
How to create a pagination with CSS?
When you give page numbers to each page of a book, it is called pagination. On a website, pagination allows dividing pages and is a series of interconnect pages. It divides and sets ordinal number pf pages. For example, the first 1, 2, 3, 4, 5 pages links are visible on a web page to make it easier for users to navigate related content. Let us see how to create a pagination on a web page with the previous and next links as well.
Create links for pagination
The links are set using the <a> element. A div is set for all the links −
<div class="pagePagination"> <a class="links" href="#">«</a> <a class="links selected" href="#">1</a> <a class="links" href="#">2</a> <a class="links" href="#">3</a> <a class="links" href="#">4</a> <a class="links" href="#">5</a> <a class="links" href="#">»</a> </div>
Previous link
As shown above, the previous link is set separately before all the links with a different symbol −
<a class="links" href="#">«</a>
Next link
As shown above, the next link is set separately after all the links with a different symbol −
<a class="links" href="#">»</a>
Display the pagination
To position and display the pagination on the web page, set the display to inline-block −
.pagePagination{
margin: 15px;
display: inline-block;
background-color: rgb(39, 39, 39);
overflow: auto;
height: auto;
}
Display the links
The links in the pagination div are displayed using the display property. To avoid the links to be underlined, set the text-decoration property to none −
.links {
display: inline-block;
text-align: center;
padding: 14px;
color: rgb(178, 137, 253);
text-decoration: none;
font-size: 17px;
}
The default link
In a pagination the current selected link is displayed differently with a separate background color −
.selected{
background-color: rgb(0, 18, 43);
}
Example
The following is the code to create pagination with CSS −
<!DOCTYPE html>
<html>
<head>
<title>HTML Document</title>
<style>
*,*::before,*::after{
box-sizing: border-box;
}
.pagePagination{
margin: 15px;
display: inline-block;
background-color: rgb(39, 39, 39);
overflow: auto;
height: auto;
}
.links {
display: inline-block;
text-align: center;
padding: 14px;
color: rgb(178, 137, 253);
text-decoration: none;
font-size: 17px;
}
.links:hover {
background-color: rgb(100, 100, 100);
}
.selected{
background-color: rgb(0, 18, 43);
}
</style>
</head>
<body>
<h1>Page pagination example</h1>
<div class="pagePagination">
<a class="links" href="#">«</a>
<a class="links selected" href="#">1</a>
<a class="links" href="#">2</a>
<a class="links" href="#">3</a>
<a class="links" href="#">4</a>
<a class="links" href="#">5</a>
<a class="links" href="#">»</a>
</div>
<h2>Hover on the above numbers to see effect</h2>
</body>
</html>
255 Views
