How to make a Pagination using HTML and CSS ?

To create pagination for a page is quite simple, you can do that by using Bootstrap, JavaScript and simplest way that is HTML and CSS. Pagination is helpful when the web site contains lots of content on a single page, that 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 those previous content and proceed to the new content page but the topic will be the same.

Creating Structure: In this section, we will just create the basic website structure of the pagination. Here, also we will attach the title attribute so the user can know what will be the content type on the next page of the pagination.



  • HTML code to make the structure:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            How to make a Pagination
            using HTML and CSS ?
        </title>
    </head>
      
    <body>
        <center>
      
            <!-- Header and Slogan -->
            <h1>GeeksforGeeks</h1>
            <p>A Computer Science Portal for Geeks</p>
        </center>
      
        <!-- contern 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 
                contribute@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>
    </body>
      
    </html>

    chevron_right

    
    

Designing Structure: In the previous section, we have created the structure of the basic website where we are going to use CSS.

  • CSS code to look good the structure:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <style>
           
        /* header styling */
        h1 {
            color: green;
        }
          
        /* pagination position styling */
        .pagination_section {
            position: absolute;
            top: 500px;
            right: 230px;
        }
          
        /* 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: 800px;
            height: 200px;
            border: 2px solid black;
        }
    </style>

    chevron_right

    
    

Combining the HTML and CSS Code: This is the final code that is the combination of the above two sections.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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: absolute;
            top: 500px;
            right: 230px;
        }
        /* 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>
    </center>
  
    <!-- contern 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 
            contribute@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>
</body>
  
</html>

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.