? Pagination in CSS

Pagination helps break large content into smaller pages or sections and provides navigation controls to move between pages.

CSS itself styles the pagination controls (like buttons or links), while the logic to change pages usually requires JavaScript or backend support.

Basic Pagination Style Example

HTML

<div class="pagination">  <a href="#">&laquo; Prev</a>  <a href="#" class="active">1</a>  <a href="#">2</a>  <a href="#">3</a>  <a href="#">Next &raquo;</a></div>

CSS

.pagination {  display: flex;  justify-content: center;  gap: 8px;  padding: 10px;  font-family: Arial, sans-serif;}.pagination a {  color: #333;  padding: 8px 12px;  text-decoration: none;  border: 1px solid #ccc;  border-radius: 4px;  transition: background-color 0.3s;}.pagination a:hover {  background-color: #ddd;}.pagination a.active {  background-color: #007bff;  color: white;  border-color: #007bff;  pointer-events: none; /* Disable clicking on current page */}

Explanation

• Pagination container uses flexbox to layout items horizontally and space them.

• Each page link (<a>) styled with padding, border, and rounded corners.

• The .active page is highlighted with a blue background and disabled pointer events.

• Hover effect gives user feedback.

Responsive Tip

You can add media queries to adjust pagination size on small screens.

Want me to help you create numbered pagination with ellipsis, or build it with dynamic page numbers using JavaScript?