Styles for Printing and PDF

Screen layouts do not always work on paper

A screen page may contain navigation, sticky controls, dark backgrounds and wide columns that waste paper or obscure content when printed. CSS can apply a second set of rules only to print media. The browser can use those rules for a physical printout or a PDF created through its print dialog.

Print styles should preserve the content a reader needs. Removing every link, footnote or heading to save space can make a printed guide harder to use.

Use @media print for targeted changes

The @media print block below hides navigation and a screen-only printing hint, removes a restrictive article width and uses dark text on a light background. Those declarations apply only when the browser renders for print media; ordinary screen styling remains available. Class names must match the actual HTML elements.

The article’s links remain in the document, but a printed URL may not be visible if the link text is vague. For important external references, use descriptive visible text or a separate URL list. Do not rely on colours or background images alone to convey meaning; printing preferences may omit them.

HTML

<nav class="site-nav">Topics</nav><main class="article"><h1>Study guide</h1><p>Read the <a href="https://example.org/guide">full guide</a>.</p></main><p class="print-hint">Use your browser’s Print command to save a PDF.</p>

CSS

@media print {
  .site-nav, .print-hint { display: none; }
  body { color: #000; background: #fff; }
  .article { max-width: none; margin: 0; }
}

• How media queries work

Plan where long content can break

A long article can cross paper pages. The break-inside property can request that a short card or figure stay together when it fits, but it cannot guarantee impossible layout: an item taller than the page must still be split or handled by the browser. Use normal document flow and inspect actual print preview rather than assuming screen-height sections translate into pages.

More advanced page settings use @page. Browser support for particular @page descriptors varies, so keep essential readability independent of precise page-margin or orientation control.

CSS — optional break request

@media print {
  .example-card { break-inside: avoid; }
}

• Page and column breaks

Verify with print preview

Open the browser’s Print dialog or emulate print media in DevTools. Check several page lengths, headings near page breaks, text contrast and whether navigation is gone while article content remains. Print to PDF to inspect the result without using paper. Screen screenshots do not prove a print stylesheet works.

If a rule does not apply, confirm that the selector matches, that the @media block is valid and that no later print rule wins in the cascade.

Syntax

@media print { .site-nav { display: none; } }

Examples

@media print {
  .site-nav, .print-hint { display: none; }
  body { color: #000; background: #fff; }
  .article { max-width: none; margin: 0; }
  .example-card { break-inside: avoid; }
}

<nav class="site-nav">Site navigation</nav><p class="print-hint">Open print preview to compare.</p><article class="article"><h2>Printable guide</h2><section class="example-card">A short example to keep together.</section></article>

Best practices

• Preserve essential article content and readable link context in print.
• Test real print previews at several page lengths.
• Treat break and @page rules as requests whose support and results need inspection.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

Related CSS documentation

Specifications & further reading

• MDN: Printing with CSS
• MDN: break-inside property