Tutorialspoint.dev

CSS | Pagination

Pagination is the process of dividing the document into pages and providing them with numbers.
Types of Pagination: There are many types of pagination in CSS. Some of them are given below:

  1. Simple Pagination
  2. Active and Hoverable Pagination
  3. Rounded Active and Hoverable Buttons
  4. Hoverable Transition Effect
  5. Bordered Pagination
  6. Rounded Border Pagination
  7. Centered Pagination
  8. Space between Pagination
  9. Pagination Size

Simple Pagination: This is the basic form of pagination.
Syntax:

.pagination {
    display:type
}
.pagination body {
    color:colorname
    decoration:type
}

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
    display: inline-block;
}
  
.pagination a {
    font-weight:bold;
    font-size:20px;
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}
.GFG {
    font-size:42px;
    font-weight:bold;
    color:#009900;
    margin-left:100px;
    margin-bottom:60px;
}
.peg {
    font-size:24px;
    font-weight:bold;
    margin-left:140px;
}
</style>
</head>
<body>
  
<div class = "GFG">GeeksforGeeks</div>
<div class = "peg">Simple Pagination</div>
<div class="pagination">
  <a href="#">«</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">7</a>
  <a href="#">8</a>
  <a href="#">9</a>
  <a href="#">10</a>
  <a href="#">»</a>
</div>
  
</body>
</html>

Output:
simple pagination

Active and Hoverable Pagination: In this pagination, by using the active class the current page will be highlighted. Hover will change the color of the page link when the mouse moves over them.
Syntax:



.pagination body.active {
    display:type
    background-color:colorname
}
.pagination body:hover:not(.active) {
    background-color:colorname
}

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
    display: inline-block;
}
  
.pagination a {
    font-weight:bold;
    font-size:20px;
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}
.pagination a.active {
        background-color:#009900;
}
.pagination a:hover:not(.active) {
    background-color: #d4d5d2;
}
.GFG {
    font-size:42px;
    font-weight:bold;
    color:#009900;
    margin-left:100px;
    margin-bottom:60px;
}
.peg {
    font-size:24px;
    font-weight:bold;
    margin-left:90px;
    margin-bottom:20px;
}
</style>
</head>
<body>
  
<div class = "GFG">GeeksforGeeks</div>
<div class = "peg">Active and Hoverable Pagination</div>
<div class="pagination">
  <a href="#">«</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a class = "active" href="#">5</a>
  <a href="#">6</a>
  <a href="#">7</a>
  <a href="#">8</a>
  <a href="#">9</a>
  <a href="#">10</a>
  <a href="#">»</a>
</div>
  
</body>
</html>

Output:
active pagination

Rounded Active and Hoverable Buttons: For rounded active and hoverable buttons just add border-radius property.
Syntax:

.pagination body.active {
    display:type
    background-color:colorname
    border-radius:size
}
.pagination body:hover:not(.active) {
    background-color:colorname
    border-radius:size
}

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
    display: inline-block;
}
  
.pagination a {
    font-weight:bold;
    font-size:20px;
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}
.pagination a.active {
    border-radius:5px;    
    background-color:#009900;
}
.pagination a:hover:not(.active) {
    background-color: #d4d5d2;
    border-radius:5px;
}
.GFG {
    font-size:42px;
    font-weight:bold;
    color:#009900;
    margin-left:100px;
    margin-bottom:60px;
}
.peg {
    font-size:24px;
    font-weight:bold;
    margin-left:40px;
    margin-bottom:20px;
}
</style>
</head>
<body>
  
<div class = "GFG">GeeksforGeeks</div>
<div class = "peg">Rounded Active and Hoverable Pagination</div>
<div class="pagination">
  <a href="#">«</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a class = "active" href="#">5</a>
  <a href="#">6</a>
  <a href="#">7</a>
  <a href="#">8</a>
  <a href="#">9</a>
  <a href="#">10</a>
  <a href="#">»</a>
</div>
  
</body>
</html>

Output:
rounded and active pagination

Hoverable Transition Effect: Transition property is added to create a transition effect on hover.
Syntax:

.pagination body:hover {
    transition:type
}

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
    display: inline-block;
}
  
.pagination a {
    font-weight:bold;
    font-size:20px;
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}
.pagination a.active {
    background-color:#009900;
}
.pagination a:hover:not(.active) {
    background-color: #d4d5d2;
}
.GFG {
    font-size:42px;
    font-weight:bold;
    color:#009900;
    margin-left:100px;
    margin-bottom:60px;
}
.peg {
    font-size:24px;
    font-weight:bold;
    margin-left:40px;
    margin-bottom:20px;
}
</style>
</head>
<body>
  
<div class = "GFG">GeeksforGeeks</div>
<div class = "peg">Hoverable Transition Effect Pagination</div>
<div class="pagination">
  <a href="#">«</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a class = "active" href="#">5</a>
  <a href="#">6</a>
  <a href="#">7</a>
  <a href="#">8</a>
  <a href="#">9</a>
  <a href="#">10</a>
  <a href="#">»</a>
</div>
  
</body>
</html>

Output:
hover transition effect

Bordered Pagination: In this type of pagination a border is added to the pagination. Use border property to add borders to the pagination.
Syntax:

.pagination body {
    border:type
}

Example:



<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
    display: inline-block;
}
.pagination a {
    font-weight:bold;
    font-size:20px;
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    border:1px solid black;
}
.pagination a.active {
    background-color:#009900;
}
.pagination a:hover:not(.active) {
    background-color: #d4d5d2;
}
.GFG {
    font-size:42px;
    font-weight:bold;
    color:#009900;
    margin-left:100px;
    margin-bottom:60px;
}
.peg {
    font-size:24px;
    font-weight:bold;
    margin-left:140px;
    margin-bottom:20px;
}
</style>
</head>
<body>
  
<div class = "GFG">GeeksforGeeks</div>
<div class = "peg">Bordered Pagination</div>
<div class="pagination">
  <a href="#">«</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a class = "active" href="#">5</a>
  <a href="#">6</a>
  <a href="#">7</a>
  <a href="#">8</a>
  <a href="#">9</a>
  <a href="#">10</a>
  <a href="#">»</a>
</div>
  
</body>
</html>

Output:
bordered pagination

Rounded Border Pagination: Border can be rounded using border-radius property.
Syntax:

.pagination body {
    border:type
    border-radius:size
}

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
    display: inline-block;
}
.pagination a {
    font-weight:bold;
    font-size:20px;
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    border-radius:5px;
    border:1px solid black;
}
.pagination a.active {
    background-color:#009900;
}
.pagination a:hover:not(.active) {
    background-color: #d4d5d2;
}
.GFG {
    font-size:42px;
    font-weight:bold;
    color:#009900;
    margin-left:100px;
    margin-bottom:60px;
}
.peg {
    font-size:24px;
    font-weight:bold;
    margin-left:110px;
    margin-bottom:20px;
}
</style>
</head>
<body>
  
<div class = "GFG">GeeksforGeeks</div>
<div class = "peg">Rounded Border Pagination</div>
<div class="pagination">
  <a href="#">«</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a class = "active" href="#">5</a>
  <a href="#">6</a>
  <a href="#">7</a>
  <a href="#">8</a>
  <a href="#">9</a>
  <a href="#">10</a>
  <a href="#">»</a>
</div>
  
</body>
</html>

Output:
rounded border pagination

Centered Pagination: Pagination can be centered by using text-align property.
Syntax:

.center {
    text-align:center
}
.pagination body {
    color:colorname
}

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
    display: inline-block;
}
.center {
    text-align:center;
}
.pagination a {
    font-weight:bold;
    font-size:20px;
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    border:1px solid black;
}
.pagination a.active {
    background-color:#009900;
}
.pagination a:hover:not(.active) {
    background-color: #d4d5d2;
}
.GFG {
    font-size:42px;
    font-weight:bold;
    color:#009900;
    text-align:center;
    margin-bottom:60px;
}
.peg {
    font-size:24px;
    font-weight:bold;
    margin-bottom:20px;
    text-align:center;
}
</style>
</head>
<body>
  
<div class = "GFG">GeeksforGeeks</div>
<div class = "peg">Centered Pagination</div>
<div class = "center">
  <div class="pagination">
    <a href="#">«</a>
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a class = "active" href="#">5</a>
    <a href="#">6</a>
    <a href="#">7</a>
    <a href="#">8</a>
    <a href="#">9</a>
    <a href="#">10</a>
    <a href="#">»</a>
  </div>
</div>
  
</body>
</html>

Output:
centered pagination

Space Between Pagination: Page links can be spaced if you do not want to group them. Use margin property to provide space between the links.

Syntax:

.pagination body {
    color:colorname
    margin:type
}

Example:



<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
    display: inline-block;
}
.center {
    text-align:center;
}
.pagination a {
    font-weight:bold;
    font-size:20px;
    color: black;
    float: left;
    margin:0px 5px;
    padding: 8px 16px;
    text-decoration: none;
    border:1px solid black;
}
.pagination a.active {
    background-color:#009900;
}
.pagination a:hover:not(.active) {
    background-color: #d4d5d2;
}
.GFG {
    font-size:42px;
    font-weight:bold;
    color:#009900;
    text-align:center;
    margin-bottom:60px;
}
.peg {
    font-size:24px;
    font-weight:bold;
    margin-bottom:20px;
    text-align:center;
}
</style>
</head>
<body>
  
<div class = "GFG">GeeksforGeeks</div>
<div class = "peg">Space Between Pagination</div>
<div class = "center">
  <div class="pagination">
    <a href="#">«</a>
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a class = "active" href="#">5</a>
    <a href="#">6</a>
    <a href="#">7</a>
    <a href="#">8</a>
    <a href="#">9</a>
    <a href="#">10</a>
    <a href="#">»</a>
  </div>
</div>
  
</body>
</html>

Output:
space between pagination

Pagination Size: The size of the pagination can be changed using font-size property.

Syntax:

.pagination body {
    color:colorname
    font-size:size
}

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
    display: inline-block;
}
.center {
    text-align:center;
}
.pagination a {
    font-weight:bold;
    font-size:25px;
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    border:1px solid black;
}
.pagination a.active {
    background-color:#009900;
}
.pagination a:hover:not(.active) {
    background-color: #d4d5d2;
}
.GFG {
    font-size:42px;
    font-weight:bold;
    color:#009900;
    text-align:center;
    margin-bottom:60px;
}
.peg {
    font-size:24px;
    font-weight:bold;
    margin-bottom:20px;
    text-align:center;
}
</style>
</head>
<body>
  
<div class = "GFG">GeeksforGeeks</div>
<div class = "peg">Pagination Size</div>
<div class = "center">
  <div class="pagination">
    <a href="#">«</a>
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a class = "active" href="#">5</a>
    <a href="#">6</a>
    <a href="#">7</a>
    <a href="#">8</a>
    <a href="#">9</a>
    <a href="#">10</a>
    <a href="#">»</a>
  </div>
</div>
  
</body>
</html>

Output:
pagination size



This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter