index.md

---
title: page
slug: Web/CSS/page
page-type: css-property
browser-compat: css.properties.page
---

{{CSSRef}}

The **`page`**[CSS](/en-US/docs/Web/CSS) property is used to specify the named page, a specific type of page defined by the {{cssxref("@page")}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule).

If there are multiple selectors that are using a named page consecutively then a forced page break using [`break-after`](/en-US/docs/Web/CSS/break-after) may be needed.

## Syntax

```css
/* 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;
```

### Values

- `auto`
 - : Default value. Use the value of the nearest ancestor with anon-`auto` value. If no ancestor has a named page value set, the used value for auto is the empty string.
- {{cssxref("custom-ident")}}
 - : Case-sensitive name defined in a [`@page`](/en-US/docs/Web/CSS/@page) at-rule.

## Formal definition

{{cssinfo}}

## Formal syntax

{{csssyntax}}

## Examples

### Named page example

In this example, there are two parts to this HTML; print controls and the content to be printed.
The print controls allow the user to select how the `section`s in the `article` will be printed.

```htmllive-sample___page-property
<!-- print options in afieldset -->
<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 Pages
 </label>
 <label for="grouped">
 <input type="radio" id="grouped" name="type" value="grouped" />Pages with
 Grouped Chapters
 </label>
 <label for="paged">
 <input type="radio" id="paged" name="type" value="paged" />
 Chapters Paged
 </label>
 <button id="print">Print</button>
</fieldset>

<!-- Content to be printed -->
<article id="print-area" data-print="single">
 <section id="toc">
 <h2>Table of contents</h2>
 <ul>
 <li>Foreword</li>
 <li>Introduction</li>
 <li>Chapter One - named pages</li>
 <li>Chapter Two - page orientation</li>
 <li>Chapter Three - page margins</li>
 <li>Conclusion</li>
 </ul>
 </section>
 <section id="foreword">
 <h2>Foreword</h2>
 <p>
 This book is all about how the CSS <code>@page</code>at-rule can help
 with printing HTML books.
 </p>
 </section>
 <section id="introduction">
 <h2>Introduction</h2>
 <p>
 This book is a concept to show how an <em>HTML</em> document can easily be
 printed out in pages.
 </p>
 </section>
 <section id="chapter1" class="chapter">
 <h2>Named pages</h2>
 <p>Lorem ipsum</p>
 </section>
 <section id="chapter2" class="chapter">
 <h2>Page Orientation</h2>
 <p>Lorem ipsum</p>
 </section>
 <section id="chapter3" class="chapter">
 <h2>Page Margins</h2>
 <p>There are 16 page margins that can be set:</p>
 <ul>
 <li>@top-left-corner</li>
 <li>@top-left</li>
 <li>@top-center</li>
 <li>@top-right</li>
 <li>@top-right-corner</li>
 <li>@left-top</li>
 <li>@left-middle</li>
 <li>@left-bottom</li>
 <li>@right-top</li>
 <li>@right-middle</li>
 <li>@right-bottom</li>
 <li>@bottom-left-corner</li>
 <li>@bottom-left</li>
 <li>@bottom-center</li>
 <li>@bottom-right</li>
 <li>@bottom-right-corner</li>
 </ul>
 <p>They can be used to show what appears in these parts of the margin</p>
 </section>
 <section id="conclusion">
 <h2>Conclusion</h2>
 <p>Now go ahead and write books.</p>
 </section>
</article>
```

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](/en-US/docs/Web/CSS/@page#margin_at-rules) of the printed pages.

```css live-sample___page-property
@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";
 }
}
```

```css hidden live-sample___page-property
fieldset {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 1rem;
width: fit-content;
}
body {
font: 1.1emsans-serif;
}
```

The next part of the CSS uses [attribute selectors](/en-US/docs/Web/CSS/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.

```css live-sample___page-property
@mediaprint {
fieldset {
display: none;
 }
section {
font-size: 2rem;
font-family: Roboto;
 }
.chapter {
border: tomato2pxsolid;
 }
 [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:

```js live-sample___page-property
constprintArea=document.querySelector("#print-area");
constprintButton=document.querySelector("#print");
constprintOption=document.querySelector("#printStyle");

printOption.addEventListener("change", (event) => {
if (event.target.value==="single") {
printArea.dataset.print="single";
 } elseif (event.target.value==="grouped") {
printArea.dataset.print="grouped";
 } else {
printArea.dataset.print="paged";
 }
});

printButton.addEventListener("click", () => {
window.print();
});
```

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

{{EmbedLiveSample('page-property', '100%', '540', , , , , "allow-modals")}}

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}