CSS Pagination

Pagination is a UI pattern used to split a large amount of content across multiple pages. It improves usability by preventing users from being overwhelmed by too much information at once. CSS is used to style pagination controls, making them easy to navigate and visually appealing.

Key CSS Properties for Pagination

• `display`: Determines the layout of pagination elements (e.g., inline, block, flex).
• `list-style`: Removes default list styling for pagination items.
• `padding`: Adds space inside pagination elements.
• `margin`: Adds space around pagination elements.
• `border`: Defines borders around pagination elements.
• `background-color`: Sets the background color of pagination elements.
• `color`: Defines the text color for pagination elements.
• `hover effects`: Changes the appearance of elements when hovered over.
• `active state`: Highlights the current page in the pagination control.

Examples of CSS Pagination

/* Basic Pagination Example */
.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
    list-style: none;
}

.pagination li {
    display: inline;
    margin: 0 4px;
}

.pagination li a {
    color: black;
    padding: 8px 16px;
    text-decoration: none;
    border: 1px solid #ddd;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.pagination li a:hover {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

.pagination li a.active {
    background-color: #4CAF50;
    color: white;
    border-color: #4CAF50;
}

            

/* Rounded Pagination Example */
.pagination-rounded {
    display: inline-block;
    padding: 0;
    margin: 0;
    list-style: none;
}

.pagination-rounded li {
    display: inline;
    margin: 0 4px;
}

.pagination-rounded li a {
    color: black;
    padding: 8px 16px;
    text-decoration: none;
    border: 1px solid #ddd;
    border-radius: 50%;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.pagination-rounded li a:hover {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

.pagination-rounded li a.active {
    background-color: #4CAF50;
    color: white;
    border-color: #4CAF50;
}

            

Explanation of CSS Pagination Properties

- `display: inline-block;`: Ensures pagination items are laid out inline and not stacked.
- `list-style: none;`: Removes default bullet points from list items.
- `padding` and `margin`: Adjusts spacing inside and around pagination items.
- `border`: Adds a border around each pagination item. Rounded borders can be used for different visual effects.
- `background-color`: Defines the background color of pagination items.
- `color`: Sets the text color for pagination items.
- `hover effects`: Provides visual feedback when a user hovers over a pagination item.
- `active state`: Visually distinguishes the current page from others, making navigation clearer for users.