← Back to CSS Course | Chapter 9: Modern CSS Features | Lesson 18 of 25

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:

  1. The Print Media Query
  2. Hiding Interactive Elements
  3. Reformatting Colors and Backdrops
  4. Controlling Page Breaks
  5. Displaying Link URLs next to Text
Syntax
css 
@media print {
  selector {
    display: none;
  }
}

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).
  • Accepted values:
  • @media print — applies only when printing
  • @media screen — applies only on screen
  • @media print and (orientation: landscape) — combined
  • @media not print — everything except print
  • @media all — every media type (the default)
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 
<style>
body { font-family: sans-serif; padding: 1rem; }
@media print {
  body {
    font-size: 12pt;
  }
}
</style>
<p>Body text is 12pt when printed.</p>

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.
  • Accepted values:
  • display: none — removes it from the printed page
  • visibility: hidden — hides it but keeps space
  • @media print — the wrapper for print-only rules
  • .no-print — a common utility class
Warning: Make sure you do not accidentally hide essential content (like document descriptions) along with your navigation bars.

Example: Hiding Interactive Elements

css 
<style>
body { font-family: sans-serif; padding: 1rem; }
nav, button, .no-print { background: #ffe0b3; padding: 4px; }
@media print {
  .no-print, nav, button {
    display: none;
  }
}
</style>
<nav>Navigation</nav>
<p>Article text stays.</p>
<button>Print</button>
<p class="no-print">Hidden when printing.</p>

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 print-color-adjust: exact; if you absolutely must force background colors to print.
  • Accepted values:
  • print-color-adjust: exact — prints backgrounds and colors as authored
  • print-color-adjust: economy — browser may drop backgrounds to save ink (default)
  • webkit-print-color-adjust: exact — prefixed form for older WebKit/Blink
  • background: white — clears backgrounds
  • color: black — high-contrast text
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 
<style>
body { font-family: sans-serif; padding: 1rem; background: #ddd; }
@media print {
  body {
    background: white;
    color: black;
  }
}
</style>
<p>On screen this page is light gray; in print it is white with black text.</p>

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.
  • Accepted values:
  • break-inside: avoid — keeps an element on one page
  • break-before: page — forces a page break before the element
  • break-after: page — forces a page break after the element
  • break-inside: avoid-page — avoids a break inside the box between pages only
  • break-before | break-after: auto | avoid | left | right — other keywords
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property
Warning: Applying break-before: always; to too many elements can cause the printer to output mostly blank pages.

Example: Controlling Page Breaks

css 
<style>
.card { background: #cfe8ff; border: 2px solid #1e6fd9; padding: 12px; margin-bottom: 8px; }
@media print {
  .card, tr {
    break-inside: avoid;
  }
}
</style>
<div class="card">Card that should not split across pages</div>
<table border="1"><tr><td>Row</td></tr></table>

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.
  • Accepted values:
  • content: " (" attr(href) ")" — appends the URL
  • ::after — the pseudo-element that holds it
  • a[href^="http"] — only external links
  • @media print — print-only rule
Warning: Avoid printing relative link URLs (like '/contact.html') since they are unhelpful on paper.

Example: Displaying Link URLs next to Text

css 
<style>
body { font-family: sans-serif; padding: 1rem; }
a { color: #1e6fd9; }
@media print {
  a[href^="http"]::after {
    content: " (" attr(href) ")";
  }
}
</style>
<p>Read the docs at <a href="https://example.com">our site</a>.</p>
Live Example
Related Topics

CSS Pagination (Print) · CSS User Interface · CSS Will Change · CSS Dark Mode

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Neglecting print tests, leaving messy navigation menus and sidebars to print onto paper.
  2. Allowing table rows or headers to split awkwardly across page breaks, making data hard to read.
  3. 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)

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.