Prev Next

CSS Pagination

CSS Pagination is used to create navigation links for dividing content into multiple pages. It is commonly used in blogs, product listings, or search results. CSS allows you to style the pagination to match the design of your website.

Key Topics

Basic Pagination

Basic pagination is created using an unordered list (<ul>) styled with CSS to resemble navigation links.

<style>
        .pagination {
            display: flex;
            list-style-type: none;
            padding: 0;
        }
        .pagination li {
            margin: 0 5px;
        }
        .pagination a {
            display: block;
            padding: 10px 15px;
            background-color: #007BFF;
            color: white;
            text-decoration: none;
            border-radius: 4px;
        }
</style>
<ul class="pagination">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
</ul>

Explanation: A basic pagination bar is created with numbered links styled to look like buttons.

Hover Effects

Add hover effects to make the pagination more interactive. Use the :hover pseudo-class for links.

<style>
        .pagination a:hover {
            background-color: #0056b3;
            color: white;
        }
</style>
<ul class="pagination">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
</ul>

Explanation: When the user hovers over a page link, its background color changes, making the interaction clear.

Active Page Styling

Style the currently active page differently to indicate the user’s location within the pagination.

<style>
        .pagination .active a {
            background-color: #28A745;
            color: white;
            pointer-events: none;
        }
</style>
<ul class="pagination">
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
</ul>

Explanation: The active page is highlighted with a green background and is non-clickable to indicate the current location.

Responsive Pagination

Make the pagination responsive by adjusting its layout on smaller screens.

<style>
        @media (max-width: 600px) {
            .pagination {
                flex-wrap: wrap;
                justify-content: center;
            }
            .pagination a {
                padding: 8px 10px;
                font-size: 14px;
            }
        }
</style>
<ul class="pagination">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
</ul>

Explanation: On smaller screens, the pagination adjusts to a vertical layout with smaller buttons, ensuring usability.

Key Takeaways

  • Basic Styling: Use lists and flexbox for creating pagination layouts.
  • Hover Effects: Enhance user interaction with background color changes.
  • Active Styling: Highlight the active page to indicate the user's current location.
  • Responsive Design: Ensure pagination adapts to various screen sizes for better usability.
Prev Next