A page designed for a screen often prints poorly: dark backgrounds waste ink, navigation clutters every page, and long headings split awkwardly. A print stylesheet fixes this with the @media print query, and it is small compared to the value it adds.
Before you start
You should be comfortable with media queries and selectors. This article covers print styles.
Step-by-step walkthrough
Step 1: Hide non-essential elements
Navigation, sidebars, buttons and ads add nothing on paper, so @media print sets them to display: none. Keep the article content and its images, and remove interactive affordances that cannot be used on paper.
Step 2: Set ink-friendly colors
A dark background wastes ink and can be unreadable, so force light backgrounds and dark text in print, and use color: #000; background: #fff. Remove decorative backgrounds and gradients, and ensure text remains legible in grayscale.
Step 3: Control page breaks
break-inside: avoid keeps a block such as a figure or a table row from splitting across pages, and break-before: page starts a section on a new page. Widows and orphans control how many lines stay together across a break. These settings determine whether the printed document reads cleanly.
Worked scenario
The print stylesheet hides chrome and avoids breaking figures.
@media print {
nav, .toolbar, .ad { display: none; }
body { color: #000; background: #fff; }
figure, table { break-inside: avoid; }
h2 { break-before: page; }
}Walk through the example
Navigation, toolbars and ads disappear, so only the article prints. Colors invert to ink-friendly values, and figures and tables avoid splitting mid-element. Headings start on a new page, which suits a long document printed as sections.
Common mistake
Leaving dark backgrounds and colored text that print illegibly or waste ink, or forgetting to hide interactive chrome so every page carries a menu. Another is ignoring page breaks, so figures split across pages.
Verify the behavior
Use the browser’s print preview and confirm chrome is hidden, colors are light and breaks fall where intended. Test a long table and confirm rows do not split. Check that links the user needs are still recognizable.
Interview exercise
Why expand link URLs in print styles?
Answer and reasoning
On paper a link is not clickable, so a reader cannot follow it. Adding the URL after the link text, for example with a::after { content: " (" attr(href) ")" }, preserves the destination. Limit it to content links so navigation-style links, which you have hidden, do not produce noise.
Continue learning
Compare media handling in Responsive images and layout in Flexbox vs grid. Read the MDN printing documentation and try the HTML and CSS interview questions.