Students print notes and results pages constantly — and most sites print terribly. 20 lines fix yours.
The essential print block
@media print {
nav, footer, .sidebar, .ad-unit, button, .no-print { display: none; }
body { background: #fff; color: #000; font-size: 12pt; }
main { max-width: 100%; margin: 0; }
a { color: #000; text-decoration: underline; }
/* print the URL after external links */
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
h2, h3 { break-after: avoid; } /* no heading orphaned at page bottom */
pre, table, img { break-inside: avoid; }
.chapter { break-before: page; } /* force new page */
}Test without paper
Ctrl/Cmd+P shows the live preview — or DevTools → Rendering → "Emulate CSS media type: print" to inspect print styles like normal CSS.
- Dark sites MUST override to black-on-white — nobody wants a solid-ink page
ptunits are natural for print (12pt body ≈ standard document)