Pagination in CSS
Pagination in CSS
Pagination in CSS is a common UI element used in web design to break down large sets of data or content into smaller, more manageable chunks. Here’s an example of how to create a simple pagination interface using CSS:
HTML:
<div class="pagination">
<a href="#" class="prev">« Previous</a>
<a href="#" class="active">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#" class="next">Next »</a>
</div>
CSS:
.pagination {
display: flex;
justify-content: center;
margin: 20px 0;
}
.pagination a {
text-decoration: none;
color: #333;
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
.pagination a.active {
background-color: blue;
color: #fff;
border-color: blue;
}
.pagination a.prev,
.pagination a.next {
margin: 0 5px;
}
In this example, we create a pagination interface using a div with the class pagination and a series of anchor tags. We use CSS to create a flexbox layout for the pagination links, with justify-content: center to center the links horizontally.
We use CSS to style the pagination links with a border, padding, and border-radius to create a button-like appearance. We use text-decoration: none to remove the underline from the links and color: #333 to set the text color to dark gray.
We add a background-color of blue, color of white, and change the border-color to blue for the active page. We use the :active pseudo-class to apply styles when the user clicks on a pagination link.
We add some margin between the pagination links using margin: 0 5px on the prev and next links.
This is a basic example of a pagination interface, but there are many ways to customize and enhance this basic structure to create more complex and visually appealing pagination interfaces.