Open In App

How to make a Pagination using HTML and CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

Creating pagination is quite simple, you can easily do that by using Bootstrap, and JavaScript. However, in this article, we will use HTML and CSS to create pagination. 

Pagination is helpful when the website contains lots of content on a single page, and a single page will not look good with all those topics together. Few websites use the scroll to avoid pagination and vice versa. But the best looks come with the combination of scroll and pagination. As a developer, you can put a few contents on a page to make that page a little scrollable until it’s annoying. After that, you can use pagination that will leave the previous content and proceed to the new content page but the topic will be the same.

Output Preview:

Approach:

  • Begin by structuring your HTML with a basic layout, including a header, content section, and a div for pagination.
  • Apply styling to the header (h1) using CSS, setting the text color to green.
  • Style the content div with margin, padding, width, height, and a border to define its appearance.
  • Inside the center tag, create a div for pagination, and include anchor tags for each page and navigation links.
  • Use CSS to style pagination links with black color, padding, and remove text decoration.
  • Apply a hover effect to non-active pagination links, changing background and text color. Customize the styling for the active pagination link, making the first and last links bold.

Example: In this example we will see how to design a Pagination page with help of HTML and CSS only.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        How to make a Pagination
        using HTML and CSS ?
    </title>
 
    <style>
        /* header styling */
        h1 {
            color: green;
        }
         
        /* pagination position styling */
        .pagination_section {
            position: relative;
        }
         
        /* pagination styling */
        .pagination_section a {
            color: black;
            padding: 10px 18px;
            text-decoration: none;
        }
         
        /* pagination hover effect on non-active */
        .pagination_section a:hover:not(.active) {
            background-color: #031F3B;
            color: white;
        }
         
        /* pagination hover effect on active*/
         
        a:nth-child(5) {
            background-color: green;
            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>GeeksforGeeks</h1>
        <p>A Computer Science Portal for Geeks</p>
 
        <!-- content in this Section -->
        <div class="content">
            <h3>Interview Experiences:</h3>
            <article>
                Share Your Questions/Experience or share
                your "Interview Experience", please mail
                your interview experience to
                review-team@geeksforgeeks.org. Also, to
                share interview questions, please add
                questions at Contribute a Question! You
                can also find company specific Interview
                Questions at our PRACTICE portal !
            </article>
        </div>
 
        <!-- pagination elements -->
        <div class="pagination_section">
            <a href="#">
                << Previous
            </a>
            <a href="#"
               title="Algorithm">
                1
            </a>
            <a href="#"
               title="DataStructure">
                2
            </a>
            <a href="#"
               title="Languages">
                3
            </a>
            <a href="#"
               title="Interview"
               class="active">
                4
            </a>
            <a href="#"
               title="practice">
                5
            </a>
            <a href="#">
            Next >>
            </a>
        </div>
    </center>
</body>
 
</html>


Output: 

HTML is the foundation of web pages and is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.

CSS is the foundation of web pages and is used for webpage development by styling websites and web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.



Last Updated : 12 Jan, 2024
Like Article
Save Article
Share your thoughts in the comments
Similar Reads