Print Styles and Special Media

People print invoices, articles and receipts more than you think — and by default web pages print badly, with navigation bars and dark backgrounds wasting ink. A small print stylesheet makes documents look professional on paper.

The @media print query

Styles inside <code>@media print</code> apply only when printing (or saving to PDF). Use it to strip away screen-only chrome: navigation, sidebars, ads, buttons.

@media print {
  .nav, .sidebar, .footer, .ad { display: none; }
  body { color: #000; background: #fff; }
}

Controlling page breaks

Use <code>break-inside: avoid</code> to stop an element splitting across pages (great for cards and figures), and <code>break-before</code>/<code>break-after</code> to force breaks before sections like new chapters.

.card { break-inside: avoid; }
h2 { break-after: avoid; } /* keep heading with its content */

Save ink and show URLs

Switch dark themes to black-on-white for print to save ink. A classic trick reveals link destinations on paper using a pseudo-element, since printed links cannot be clicked.

@media print {
  a::after { content: ' (' attr(href) ')'; font-size: .9em; }
}

Other media types and features

Beyond <code>print</code> and <code>screen</code>, media features let you adapt to capabilities: <code>prefers-color-scheme</code>, <code>prefers-reduced-motion</code>, <code>hover</code> (does the device have a hover-capable pointer?) and <code>orientation</code>. They let CSS respond to the real device, not just its width.

/* no print styles */

@media print { .nav { display: none; } body { color:#000 } }