HTML print stylesheet: declare a separate rendering context

When it earns its place

An inspection report has navigation and action controls on screen, but the printed record needs a legible heading, dates, and evidence summary without those controls. The print stylesheet can hide chrome and tune page breaks while the HTML keeps one semantic source of truth. Treat print as a different presentation of the same record, not as a private export path: anyone who can access the page can inspect its markup. A printable report still needs server authorization and a stable record snapshot if it is used as evidence.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inspection I-47 report</title>
  <link rel="stylesheet" href="/assets/report-screen.css">
  <link rel="stylesheet" href="/assets/report-print.css" media="print">
</head>
<body>
  <main><h1>Inspection I-47</h1><p>Seal check recorded before dispatch.</p></main>
</body>
</html>

Browser boundary

Media selection governs application of styles, not access control. Browsers may still fetch a nonmatching stylesheet, so do not claim that media=print removes all network cost from screen views.

Cost and maintenance

A second CSS file adds maintenance and may add a request. It is usually cheaper than duplicating report markup, provided print preview is tested whenever the underlying document layout changes.

Common Mistakes

• Do not build a separate printable page that drifts from the report data.
• Do not assume print CSS keeps private content hidden.
• Do not forget to test page breaks and long tables in print preview.

Connected lessons

• HTML document skeleton: declare language, encoding, and a real title
• HTML title and metadata: distinguish document identity from page copy
• HTML data tables: name row and column relationships explicitly

Continue with HTML color-scheme metadata: declare supported UI schemes separately from browser chrome.

Continue with HTML subresource integrity: bind a stylesheet to the bytes you reviewed.

Rendering decisions

• CSS @page: set a print sheet contract without hiding overflow

Related CSS decisions

• CSS widows and orphans: keep short print paragraphs together

Related CSS decisions

• CSS print-color-adjust: request fidelity without trusting printer color