Page number

Learn to add page numbers with CSS.

Page number counters

To show each page's number when printing, CSS counters help. The counter(page) expression gives the current page number. It goes inside the content property of a margin box within @page.

Example: @page { @bottom-center { content: counter(page); } }. This writes the number at the bottom center of each page. Other boxes include @bottom-left and @top-right.

Page number formats

You can display the page number in other formats. counter(page, upper-roman) uses capital Roman numerals (I, II, III). counter(page, lower-alpha) uses letters (a, b, c).

You can also join two counters: content: "Page " counter(page). The footer then reads "Page 1", "Page 2", and so on. Format the content however you like.

Exercise Put the page number at bottom center

Write an @page declaration. Inside it, define a @bottom-center box with content: counter(page). The same @page block must also declare margin: 2cm.

Show example solution

/* put page number at bottom center */
@page {
  margin: 2cm;
  @bottom-center {
    content: counter(page);
  }
}

Test yourself

What does counter(page) give?
```
@page { @bottom-center { content: counter(page); } }
```
- Total element count
- Page margin
- Print date
- Current page number
Show answer

Current page number — Correct. counter(page) gives the current page number.

Put the page number at bottom center

@page {
  @bottom-center {
    content: ____;
  }
}

Show answer

@page {
  @bottom-center {
    content: counter(page);
  }
}

What does counter-reset: page do?
```
h1 { counter-reset: page; }
```
- Restarts the counter at zero
- Decreases the counter by one
- Deletes the counter
- Hides the counter
Show answer

Restarts the counter at zero — Correct. counter-reset: page restarts the counter at zero.
Match each piece to its meaning

counter(page)

Page number
counter-reset

Restart counter
@bottom-center

Bottom center box

Next lesson: Summary - Printable report

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies