• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

CSS Pagination

← Previous Next →

🔹 What is CSS Pagination?

CSS Pagination is the technique of visually styling page numbers or navigation links that allow users to navigate between multiple pages of content — such as articles, products, blog posts, or search results.

Pagination does not control page functionality (that's handled with HTML or JavaScript), but CSS ensures it's visually clear, user-friendly, and responsive.

🔸 Basic Pagination Structure

<div class="pagination">
  <a href="#">&laquo;</a> <!-- previous -->
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#" class="active">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">&raquo;</a> <!-- next -->
</div>

🔸 Basic CSS Styling for Pagination

.pagination {
  display: flex;
  justify-content: center;
  padding: 10px;
}

.pagination a {
  color: black;
  padding: 8px 16px;
  margin: 0 4px;
  text-decoration: none;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.pagination a:hover {
  background-color: #ddd;
}

.pagination a.active {
  background-color: #3498db;
  color: white;
  border: 1px solid #3498db;
}

🔸 Responsive Pagination with Media Queries

@media screen and (max-width: 600px) {
  .pagination a {
    padding: 6px 10px;
    font-size: 14px;
  }
}

🔸 Pagination with Icons

Use HTML entities or icons (like Font Awesome):

<a href="#">&laquo;</a>  <!-- « for previous -->
<a href="#">&raquo;</a>  <!-- » for next -->

Or:

<a href="#"><i class="fa fa-angle-left"></i></a>
<a href="#"><i class="fa fa-angle-right"></i></a>

Practice Questions

✅ Write CSS for the following:

Q1. Create a horizontal pagination bar using Flexbox.

Q2. Highlight the current page using .active class.

Q3. Add hover effect on page links.

Q4. Style previous and next buttons differently.

Q5. Add spacing between page numbers.

Q6. Round the corners of pagination buttons.

Q7. Make pagination responsive for smaller screens.

Q8. Add icons for previous and next links.

Q9. Disable a link using pointer-events: none;.

Q10. Use aria-current="page" for accessibility on active links.

← Previous Next →

CSS

online coding class codepractice

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

codepractice logo
Login
Go Back Top