CSS Pagination

CSS Pagination

This lesson builds a responsive pagination with CSS.

A site with a large number of pages can benefit from having pagination on each one.

The usual markup is an unordered list (<ul>) holding a series of links, with one link per page number, plus "previous" and "next" controls.

Example

A basic version:

Prompt
Create a simple pagination using an unordered list with CSS flexbox. Include previous ("«") and next ("»") controls and page numbers 1-5. Style with centered layout, no list bullets, bordered links with rounded corners, and padding.
Output: complete HTML page

Example Explained

Three declarations on the pagination container do the layout:

  • display: flex; places the page numbers in a horizontal row
  • justify-content: center; centers that row
  • list-style: none; drops the list bullets

The look of the page numbers comes from the <a> inside each <li>, styled with properties such as display, padding, text-decoration, border, color, and border-radius.

Pagination With an Active Class

An .active class marks the current page, so users can tell where they are.

Example

The same list, now with an .active class:

Prompt
Create a pagination with previous/next controls and page numbers 1-5. Add an .active class to one page link with a green (#4CAF50) background and white text to highlight the current page. Include the base pagination styles (flex, centered, no bullets, bordered rounded links).
Output: complete HTML page

Pagination With a Disabled Class

On the last page, the "Next" button should not work.

A .disabled class handles this: its color, cursor, and pointer-events settings leave "Next" unclickable.

Example

The list again, with a .disabled class:

Prompt
Create a pagination with previous/next controls and page numbers 1-5. Add a .disabled class to the "next" link with gray color (#dddddd), cursor not-allowed, and pointer-events none to make it unclickable. Include base pagination styles and an .active class on one page link.
Output: complete HTML page