CSS Print Styles

Imagine clicking the print button on an online receipt or shipping label. But instead of a clean, readable document, your printer spits out six pages covered in black sidebar columns, interactive navigation menus, promotional banners, and half-blank sheets. HTML print styles solve this problem. They allow you to apply specific design rules that only run when your page is printed onto physical paper. By hiding interactive navigation menus, removing heavy background fills, and adjusting text colors to clean black-and-white, you ensure your receipts and tickets print beautifully while saving ink.

In this page:

The Print Media Query
Hiding Interactive Elements
Reformatting Colors and Backdrops
Controlling Page Breaks
Displaying Link URLs next to Text

The Print Media Query

You can write CSS rules that only run when your webpage is sent to a printer by using the print media query. This allows you to completely customize your page layout specifically for physical paper dimensions.

Note: Test your print styles easily by opening your browser's print preview menu (Ctrl+P or Cmd+P).

Warning: Never use heavy background colors in your print styles, as printers will ignore them by default or waste ink.

Example: The Print Media Query

css

@media print {
  body {
    font-size: 12pt;
  }
}

Hiding Interactive Elements

When printing a webpage, interactive elements (like sidebars, navigation menus, and submit buttons) are completely useless on paper and should be hidden using the display: none property.

Note: Create a CSS utility class called no-print to quickly hide specific elements on paper.

Warning: Make sure you do not accidentally hide essential content (like document descriptions) along with your navigation bars.

Example: Hiding Interactive Elements

css

@media print {
  .no-print, nav, button {
    display: none;
  }
}

Reformatting Colors and Backdrops

Printers do not print bright colors or dark backgrounds well. To save ink and keep your documents readable, your print styles should use high-contrast black text on a clean, white background.

Note: Use the CSS property color-adjust: exact; if you absolutely must force background colors to print.

Warning: Most browsers block background colors from printing automatically to save ink, so design your layouts to work cleanly on white paper.

Example: Reformatting Colors and Backdrops

css

@media print {
  body {
    background: white;
    color: black;
  }
}

Controlling Page Breaks

Printers split content onto physical sheets based on paper length. This can cause headings to print at the very bottom of a page, separated from their paragraphs on the next sheet. You can use CSS properties (like break-before or break-inside) to control where page breaks occur.

Note: Use break-inside: avoid; on table rows and image cards to keep them from getting split across two pages.

Warning: Applying break-before: always; to too many elements can cause the printer to output mostly blank pages.

Example: Controlling Page Breaks

css

@media print {
  .card, tr {
    break-inside: avoid;
  }
}

Displaying Link URLs next to Text

On a physical piece of paper, clickable links are useless since readers cannot click them. To help paper readers find your referenced pages, you can use CSS pseudo-elements to automatically print the actual URL path next to your link text.

Note: Use this technique specifically for absolute links to help readers find your referenced websites.

Warning: Avoid printing relative link URLs (like '/contact.html') since they are unhelpful on paper.

Example: Displaying Link URLs next to Text

css

@media print {
  a[href^="http"]::after {
    content: " (" attr(href) ")";
  }
}

Common Mistakes

Neglecting print tests, leaving messy navigation menus and sidebars to print onto paper.
Allowing table rows or headers to split awkwardly across page breaks, making data hard to read.
Failing to print actual URL paths next to your link texts, leaving paper readers unable to find your pages.

Chapter Summary

The print media query allows you to define custom layout and design rules specifically for physical paper.
Use display: none to hide interactive elements like menus and buttons that are useless on paper.
Enforce high-contrast black-and-white colors to save ink, control page breaks cleanly, and print actual URL paths next to your link text.

Browser Support

Standard print stylesheets and page-break properties are supported natively by all modern web browsers.

🔒

Chapter Quiz — Complete all 25 topics to unlock

0/25 topics done

Complete these topics first:

← Previous Lesson CSS User Interface Next Lesson → CSS Pagination (Print)