CSS AdvancedLesson 71Free preview

CSS Pagination

This lesson is part of CSS · All levels

Summary

Pagination breaks down long lists into several pages to make it easy for users to browse content. In CSS, pagination is usually built from a list containing a horizontal page numbered link. The page being opened is given a class `.active` with a contrasting style, and the entire link is given a convenient space to click.

Key points

General structure: `<ul>` contains `<li>` with a page number link
`display: flex` or `float` are used to compile numbers in a single row
`.active` class marks the page running with contrasting background colors
Attributes `aria-current="page"` mark active pages for screen readers

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.