• Hajipur, Bihar, 844101

☰
❮
❯

CSS

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)

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.

CSS Pagination Quiz

Q1: What CSS property arranges pagination links in a row?

A. display: inline;
B. display: flex;
C. text-align: center;
D. position: absolute;

Q2: Which pseudo-class is used for styling hover effect?

A. :focus
B. :hover
C. :active
D. :visited

Q3: How do you highlight the current page in pagination?

A. Add class="active" and style it
B. Use <strong>
C. Use JavaScript only
D. It’s not possible

Q4: What property makes rounded corners on page links?

A. outline:
B. border-style:
C. border-radius:
D. box-shadow:

Q5: What is the effect of pointer-events: none; on a link?

A. Makes it unclickable
B. Hides it
C. Enlarges it
D. Centers it

Q6: Which HTML symbol represents the "next" button in pagination?

A. &circle;
B. &raquo;
C. &times;
D. &gtlt;

Q7: Which CSS unit helps with responsive pagination?

A. px
B. % or em
C. pt
D. cm

Q8: What makes the active page visually distinct?

A. Custom background and color
B. Italics
C. Margin
D. Font weight only

Q9: How to center pagination?

A. justify-content: center; in Flexbox
B. margin: auto;
C. text-align: left;
D. align: center;

Q10: Which property controls spacing between page numbers?

A. padding only
B. margin or gap
C. float
D. display
← Previous Next →
Login
Go Back Top