ITChapters | Learn HTML Online | HTML Tutorial

CSS Pagination

CSS pagination is a very useful technique for indexing different pages of a website on the homepage. If your website has lots of pages, you have to add some sort of pagination to each page

Following are the different types of pagination:

Basic Pagination

This is the simplest pagination. You have to use pagination class to an <ul> element to attain this pagination.

See this example:

.pagination {
    display: inline-block;
}

.pagination a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}

Active and Hoverable Pagination

Highlight the current page with an .active class, and use the :hover selector to change the color of each page link when moving the mouse over them:

See this example:

.pagination {
    display: inline-block;
}

.pagination a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}