CSS page Property

The page property assigns a named page context to elements in a paged-media formatting process, linking document content to the matching rules defined by the @page at-rule. When an element is associated with a specific page name, the page-level declarations (margins, margin boxes, size, and other page-scoped settings) defined in the corresponding @page rule are used for pages that contain that element. This makes page a bridge between block-level content in the document tree and the page-level formatting rules that control how that content is framed and decorated when reproduced in a paged medium like printed output or PDF.

Although page itself is about selecting which page template applies, its effect is felt through the page box and margin-box system: choosing a different page name can change outer and inner margins, headers/footers (margin boxes), and other page-specific adjustments that alter layout at the scale of whole pages. It does not directly describe low-level layout metrics inside the flow (line heights, text wrapping), but by changing the page context it can produce different paginated results for the same content. Because it operates at the paged-media layer, page is primarily relevant for elements that start or span page breaks or that you want to have presented within a particular page template.

When working with page, you typically consider it alongside properties that control fragmentation and page-boundary behavior. For controlling where page breaks are preferred or forced, the page-break-before property (and its related break-* equivalents) are commonly used; for preserving lines across page boundaries, properties like orphans and widows play an important role. In practice, use page when you need content to adopt a particular page template defined by @page rules, and combine it with break- and line-control properties to produce predictable, publication-quality paged output.