How to Use CSS page Property for Print Layouts

The CSS page property enables developers to apply custom page layouts to specific sections of an HTML document during printing or PDF generation. By pairing named @page at-rules from the CSS Paged Media Module with the page selector property, individual sections—such as landscape spreadsheets, portrait text blocks, or margin-free cover pages—can switch orientations, margins, and paper sizes dynamically. This article covers the syntax, mechanics, and automatic page-break behaviors associated with assigning custom layouts using the page property.

Defining Named Page Rules

Before assigning a layout to an HTML section, you must define that layout using a named @page rule. The standard @page rule targets every printed page, but appending an identifier creates a specialized, named context.

@page {
  size: A4 portrait;
  margin: 20mm;
}

@page cover-page {
  margin: 0;
}

@page landscape-table {
  size: A4 landscape;
  margin: 10mm;
}

In this setup, standard pages inherit the default portrait dimensions and 20mm margins, while cover-page eliminates margins and landscape-table rotates the orientation.

Applying the Layout with the page Property

To bind a named @page context to an HTML container, apply the page property to the target element using the identifier defined in your stylesheet.

.cover {
  page: cover-page;
}

.data-report {
  page: landscape-table;
}

<section class="cover">
  <h1>Annual Report</h1>
</section>

<section class="content">
  <p>Standard report text printed in default portrait orientation.</p>
</section>

<section class="data-report">
  <table>
    <!-- Wide data table -->
  </table>
</section>

When the user agent processes .cover, it formats that container using the properties declared inside @page cover-page. Once the document transitions to .content, it reverts to the default @page behavior (or page: auto). When it reaches .data-report, it shifts to the landscape layout.

Automatic Page Breaks and Transitions

The CSS Paged Media specification dictates that changing the page property triggers a forced page break. If the current page context does not match the page context required by an incoming element, the rendering engine automatically inserts a break before that element.

For example, transitioning from a default page to an element styled with page: landscape-table forces the table onto a fresh, landscape-oriented page. Similarly, the first element following the landscape section will break onto a new, portrait-oriented page unless it also explicitly shares the landscape-table page value.

Inheritance and Resetting

The page property is inherited. Any child elements inside an element with an assigned page layout will continue to render inside that same page context across page breaks, until:

1. A descendant element specifies a different named page.
2. A descendant element resets the property to page: auto, reverting to the nearest ancestor or the initial document page context.

This inheritance model allows entire multi-page chapters, appendixes, or data sections to maintain custom styling simply by declaring the page property once on their root wrapping container.