media
@page
Styles the page box used when printing or generating paged media, controlling size, margins, and margin boxes like headers and footers. Selectors like :first, :left, :right, and named pages let you target specific pages.
@page [<page-selector>] { <descriptors> }Common conditions / descriptors
| Descriptor | Purpose |
|---|---|
| size | Page dimensions and orientation, e.g. A4 landscape |
| margin | Printable margins around the page box |
| :first | Target only the first page |
| :left / :right | Target left- or right-facing pages in duplex output |
| :blank | Style blank pages inserted by forced breaks |
| @top-center / @bottom-right | Margin box regions for running headers/footers |
Examples
@page {
size: A4;
margin: 20mm;
}Set paper size and uniform margins for print
@page :first {
margin-top: 40mm;
}Larger top margin on the cover page
@page {
@bottom-center { content: counter(page) ' / ' counter(pages); }
}Page numbers in the bottom margin (paged-media UAs)
@media print {
@page { size: letter; margin: .5in; }
a::after { content: ' (' attr(href) ')'; }
}Print-specific page setup plus link URL annotation
Gotcha
Browsers implement only a subset of the Paged Media spec — margin boxes and named pages work best in PDF-generation engines. Only a limited set of properties (size, margin, orphans, widows, etc.) are honored inside @page.
Related at-rules
@media
Applies contained CSS rules only when the specified media query matches the user's device, viewport, or environment. It is the foundation of responsive design and print-specific styling.
@charset
Declares the character encoding of the stylesheet so the parser can decode non-ASCII bytes correctly. It must be the very first thing in the file, byte for byte, and only utf-8 is meaningful in practice.
@import
Pulls another stylesheet into the current one at parse time, optionally scoped to a cascade layer, supports condition, or media query. It must appear at the top of a stylesheet, before all other rules except @charset and @layer statements.