@media print in CSS: pages that finally print cleanly

When someone clicks "Print" on your site, the browser produces by default an almost exact copy of the screen: navigation menu, buttons, colored background, everything gets printed, often wasting paper and ink in the process. The @media print media query lets you take back control of that output and define a stylesheet meant purely for paper.

Whether you are designing an invoice, a printable blog article or a simple order confirmation, this part of your CSS deserves to be treated as a separate experience, with its own readability rules and its own priorities.

Definition

@media print is a CSS media query that specifically targets the "print" media type, meaning any rendering meant for paper output or for a PDF generated through the browser's "Print" function. Rules placed inside this block never apply on screen: they stay dormant until the user triggers a print job or a print preview.

@media print {
  nav,
  footer,
  .sidebar,
  .cta-button {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 12pt;
  }
}

This media query belongs to the same family as Media query, which is usually used to adapt a page to screen width. Here, it is no longer the size that matters, but the output media itself.

Why a dedicated print stylesheet matters

A screen and a sheet of paper have almost nothing in common. A screen displays content in color, with infinite scrolling, hover interactions and a variable width. Paper, on the other hand, is fixed, often black and white on home printers, and it costs ink for every colored pixel. Without intervention, a modern website prints useless menus, buttons that serve no purpose on a dead page, and sometimes dark backgrounds that drain an ink cartridge in seconds.

By defining specific rules inside @media print, you take back control over what actually matters to a reader holding a piece of paper: the text, the essential images, and possibly contact or reference information.

The classic use cases

Three habits come up almost systematically in a serious print stylesheet.

The first is hiding everything that only makes sense on screen: the navigation bar, action buttons, social sharing widgets, ads, or a live chat widget. These elements bring nothing to a printed page, and sometimes get cut in the middle of a page, which produces a genuinely ugly result.

The second habit is forcing a white background and black text. A site with a dark theme or a very colorful look is pleasant on screen, but becomes unreadable or expensive in ink once printed. Most browsers already skip background colors by default when printing, but it remains wise to state it explicitly in your rules.

The third habit, more subtle, is displaying the full link address next to the clickable text. On paper, a blue underlined link leads nowhere: the URL itself needs to be revealed, which the content property combined with the ::after pseudo element makes possible.

@media print {
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555;
  }
}

This last point ties directly into how the content works, letting you insert generated text dynamically from an HTML attribute.

Structuring the layout for paper

Beyond color and displayed content, printing raises layout questions that screens simply ignore: where a new page should start, whether a table should avoid being cut in half, and how margins are handled.

These properties remain rarely used day to day, but they make all the difference on a long document such as a quote, a report or a multi page invoice.

Testing and debugging your print styles

Unlike a screen width media query, @media print cannot simply be tested by resizing the browser window. The most reliable method remains opening the print preview, usually accessible through the system's print shortcut, then checking that navigation has indeed disappeared, that the background is white and that links display their address.

Modern browser developer tools also let you emulate the print media directly inside the rendering tab, which avoids opening an actual print dialog for every single test.

Common pitfalls

Another classic pitfall is forgetting that @media print adds to existing styles, it does not automatically replace them. If an element is already hidden with display: none on screen, it stays hidden when printing unless you say otherwise. You always have to think in terms of overriding, not rewriting from scratch.

FAQ

No, that is not necessary. You can perfectly well include your @media print block directly inside your main stylesheet, right after your other rules. A separate file, loaded with the media="print" attribute on the link tag, remains an option for very large projects, but it needlessly complicates maintenance for most sites.

Yes, Flexbox and CSS Grid remain fully usable inside an @media print block, but keep in mind that printed output has no scrolling: a flexible container can therefore produce unexpected page breaks if its content exceeds the height of a sheet of paper.

Yes, the @media screen, print syntax lets you group two media types under the same set of rules, separated by a comma that acts as a logical "or". This is useful for shared styles, such as a more readable font, that should apply in both contexts at once.