The page CSS property is used to specify the named page, a specific type of page defined by the @page at-rule.

If there are multiple selectors that are using a named page consecutively then a forced page break using break-after may be needed.


/* set a named page */
page: exampleName;
page: chapterIntro;

/* Use ancestors named page */
page: auto; /* default value */

/* Global values */
page: inherit;
page: initial;
page: revert;
page: revert-layer;
page: unset;



Default value. Use the value of the nearest ancestor with a non-auto value. If no ancestor has a named page value set, the used value for auto is the empty string.


Case-sensitive name defined in a @page at-rule.

Formal definition

Initial valueauto
Applies toblock-level elements in the normal flow of the root element. User agents may also apply it to other elements like table-row elements.
Computed valueas specified
Animation typediscrete

Formal syntax

page = 
auto |


Named page example


There are two parts to this HTML:

  • The print controls
  • The content to be printed

The print controls allow the user to select how the sections in the article will be printed.

<!-- print options -->
<fieldset id="printStyle">
  <legend>How would you like to print</legend>
  <label for="single"
    ><input type="radio" id="single" name="type" value="single" checked />No
  <label for="double"
    ><input type="radio" id="grouped" name="type" value="grouped" />Pages with
    Grouped Chapters</label
  <label for="double"
    ><input type="radio" id="paged" name="type" value="paged" />Chapters
  <button id="print">Print</button>
<!-- Content to be printed -->
<article id="print-area" data-print="single">
  <section id="toc">
    <h2>Table of contents</h2>
      <li>Chapter One - named pages</li>
      <li>Chapter Two - page orientation</li>
      <li>Chapter Three - page margins</li>
  <section id="foreword">
      This book is all about how the CSS <code>@page</code> at-rule can help
      with printing HTML books.
  <section id="introduction">
      This book is a concept to show how an <em>HTML</em> document can easily be
      printed out in pages.
  <section id="chapter1" class="chapter">
    <h2>Named pages</h2>
    <p>Lorem ipsum</p>
  <section id="chapter2" class="chapter">
    <h2>Page Orientation</h2>
    <p>Lorem ipsum</p>
  <section id="chapter3" class="chapter">
    <h2>Page Margins</h2>
    <p>There are 16 page margins that can be set:</p>
    <p>They can be used to show what appears in these parts of the margin</p>
  <section id="conclusion">
    <p>Now go ahead and write books.</p>


The first part of the CSS sets up the named pages, these include the size and orientation and also some content to go in the @top-center margin of the printed pages.

@page toc {
  size: a4 portrait;
  @top-center {
    content: "Table of contents";

@page foreword {
  size: a4 portrait;
  @top-center {
    content: "Foreword";

@page introduction {
  size: a4 portrait;
  @top-center {
    content: "Introduction";

@page conclusion {
  size: a4 portrait;
  @top-center {
    content: "Conclusion";

@page chapter {
  size: a4 landscape;
  @top-center {
    content: "Chapter";

The next part of the CSS uses attribute selectors to apply the print dimensions, orientation, and margins defined in the named @page rules defined in the previous CSS section to elements using the page property.

The sections with class="chapter" are concurrent and appear as one page. The break-after: page; is used to split them up, which splits each chapter into a separately printed page.

@media print {
  fieldset {
    display: none;
  section {
    font-size: 2rem;
    font-family: Roboto;
  .chapter {
    border: tomato 2px solid;
  [data-print="grouped"] > #toc,
  [data-print="paged"] > #toc {
    page: toc;
    font-family: Courier;
  [data-print="grouped"] > #foreword,
  [data-print="paged"] > #foreword {
    page: foreword;
    font-family: Courier;
  [data-print="grouped"] > #introduction,
  [data-print="paged"] > #introduction {
    page: introduction;
    font-family: Courier;
  [data-print="grouped"] > #conclusion,
  [data-print="paged"] > #conclusion {
    page: conclusion;
    font-family: Courier;
  [data-print="grouped"] > .chapter,
  [data-print="paged"] > .chapter {
    page: chapter;
  [data-print="paged"] > .chapter {
    border: none;
    break-after: page;
  .chapter > ul {
    columns: 2;


The JavaScript updates the value of the data-print attribute, which is the attribute on which the named page is applied, when you select a different printing option:

const printArea = document.querySelector("#print-area");
const printButton = document.querySelector("#print");
const printOption = document.querySelector("#printStyle");
printOption.addEventListener("change", (event) => {
  if ( === "single") {
    printArea.dataset.print = "single";
  } else if ( === "grouped") {
    printArea.dataset.print = "grouped";
  } else {
    printArea.dataset.print = "paged";
printButton.addEventListener("click", () => {


What is printed, and what is shown in the print preview dialog, will change depending on which print style radio button is selected.


CSS Paged Media Module Level 3
# using-named-pages

Browser compatibility

BCD tables only load in the browser