The essentials
Quick reference
One focused task per row. Jump to the related section for complete, working examples.
| Use | Syntax | Examples |
|---|---|---|
| Target print output | @media print { nav, .toolbar { display: none; } } | View examples |
| Request paper size | @page { size: A4; } | View examples |
| Set page margins | @page { margin: 18mm; } | View examples |
| Assign a named page | .landscape-table { page: wide; } | View examples |
| Landscape named page | @page wide { size: A4 landscape; } | View examples |
| Start on a new page | h1.chapter { break-before: page; } | View examples |
| Keep a block together | figure, table { break-inside: avoid; } | View examples |
| Keep ending lines together | p { orphans: 3; widows: 3; } | View examples |
| Expose external URLs | a[href^="http"]::after { content: " (" attr(href) ")"; } | View examples |
| Request exact colors | .chart { print-color-adjust: exact; } | View examples |
| Use physical page units | @page { margin: 15mm 18mm; } | View examples |
| Repeat table headings | thead { display: table-header-group; } | View examples |
| Expose abbreviation title | abbr[title]::after { content: " (" attr(title) ")"; } | View examples |
Printed documents fragment continuous content into pages with device-dependent margins, headers, color, and font metrics. Begin with semantic source order, remove interactive-only chrome, expose link destinations where useful, request—not assume—page geometry, and test real browser print previews at multiple paper sizes and scale settings.
Step by step
Detailed examples
Replace interaction with a coherent static document
Print styles should not merely hide buttons; they must preserve headings, reading order, labels, data, and outcomes that interactive states otherwise reveal. Use @media print, readable point or rem sizes, physical margins, and ordinary document flow. Avoid fixed-position UI that repeats over page content.
@media print {
nav, .toolbar, button, [data-print-hidden] { display: none !important; }
body { margin: 0; color: #000; background: #fff; font-size: 11pt; line-height: 1.4; }
main { max-inline-size: none; }
}Treat @page dimensions as requests to the output device
@page controls page box size, orientation, and margins, but printer capabilities and user dialog choices can override them. Named pages support special sections such as wide tables. Browser support for margin boxes and generated running headers varies, so critical identity belongs in document content too.
@page { size: A4; margin: 18mm; }
@page wide { size: A4 landscape; margin: 14mm; }
.landscape-table { page: wide; }Guide breaks without creating blank or clipped content
break-before/after/inside apply to fragmentation contexts, and avoid is a request that may be overridden when a box exceeds a page. widows and orphans govern minimum paragraph lines around breaks. Do not force every heading or component to stay with arbitrarily large content.
@media print {
h1.chapter { break-before: page; }
h2, h3 { break-after: avoid-page; }
figure, pre, blockquote { break-inside: avoid; }
p { widows: 3; orphans: 3; }
}Expose destinations and hidden context selectively
Printed links cannot be activated, so external destinations may be useful after concise link text. Avoid expanding internal fragments, mailto links, long signed URLs, or every navigation item. Generated content is not a substitute for source content and may not be copied or exposed consistently.
@media print {
main a[href^="https://"]::after { content: " (" attr(href) ")"; font-size: .85em; overflow-wrap: anywhere; }
a[href^="#"]::after { content: none; }
abbr[title]::after { content: " (" attr(title) ")"; }
}Design for missing backgrounds and grayscale output
Browsers and users may omit backgrounds or alter colors to save ink. print-color-adjust:exact is advisory and should be limited to graphics whose meaning requires exact appearance. Add labels, patterns, borders, or direct values so charts and status remain understandable in monochrome.
@media print {
.chart { print-color-adjust: exact; }
.status { color: #000; border: 1px solid currentColor; }
.status::before { content: attr(data-label) ": "; font-weight: 700; }
img { max-inline-size: 100%; }
}Print data tables and form state as data
Table header groups may repeat across page fragments; prevent rows from splitting where feasible without making large rows unprintable. Interactive inputs can render inconsistently, so reports should include submitted values as text. Ensure signatures, totals, captions, and validation outcomes are present in the document.
@media print {
table { inline-size: 100%; border-collapse: collapse; }
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
tr { break-inside: avoid; }
th, td { border: .5pt solid #555; padding: 4pt; text-align: start; }
}Local code tester
Prepare an article for print
Use browser print preview to inspect page breaks, link destinations, and ink-aware styling.
Sources and further reading
References
Authoritative documentation used to verify and expand this cheat sheet.
Help us improve
Found a typo or missing example?
Tell us what would make this cheat sheet clearer, more complete, or more useful.