CSS Pagination

Pagination is what allows users to move between multiple pages of content—whether it’s blog posts, search results, or gallery items. While CSS doesn’t offer a built-in pagination property, we can create a clean and professional-looking footer navigation using a combination of HTML and CSS.

Let’s walk through how to build it step by step.

Basic Pagination HTML

We’ll create a simple navigation bar with page numbers, and one of them will be marked as the current (active) page.

				
					<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Pagination – Learn With Arshyan</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h2>Simple Pagination Example</h2>

  <div class="pagination">
    <a href="#">«</a>
    <a href="#">1</a>
    <a href="#" class="active">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">»</a>
  </div>

</body>
</html>

Here, we’re using simple anchor tags to represent page numbers. The class active is applied to the current page.

Pagination Styling in CSS

Now let’s style this navigation bar to look modern and interactive.

				
					/* style.css */
body {
  font-family: Arial, sans-serif;
  text-align: center;
  padding-top: 40px;
  background-color: #f9f9f9;
}

.pagination {
  display: inline-block;
  background-color: white;
  border: 1px solid #ccc;
  padding: 10px 15px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.pagination a {
  color: #333;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 4px;
  margin: 0 4px;
  transition: background-color 0.3s ease;
}

.pagination a:hover:not(.active) {
  background-color: #333;
  color: #fff;
}

.pagination a.active {
  background-color: rebeccapurple;
  color: white;
  font-weight: bold;
}

How This Works

The .pagination class styles the overall container.
Each anchor tag (<a>) is styled to look like a button.
When you hover over a page number, the background turns dark (unless it’s already active).
The :hover:not(.active) selector ensures we don’t override the styling of the currently active page.

Final Output

The active page is highlighted in purple.
Hovering over other page numbers shows a black background.
Arrows (« and ») can be used for previous/next navigation.

Summary Table

Feature	Purpose
`<a>` tags	Represent individual pages
`.active` class	Highlights the current page
`:hover:not(.active)`	Adds hover effect without affecting the active page
Custom styles	Make your pagination match your site’s design