Print Styles

When someone prints your web page, the browser applies its default print styles. But you can override these with CSS to make your pages look great on paper. Print styles let you hide navigation, adjust colors, and optimize layouts for the printed page.

The @media print Rule

You use a media query to target print specifically. Rules inside @media print only apply when the page is printed or previewed in print mode.

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

  nav, footer, .sidebar {
    display: none;
  }
}
    

The most common print adjustments are hiding non-essential elements (navigation, sidebars, footers), switching to black text on white background, and adjusting font sizes for paper.

Hiding Screen-Only Elements

Many elements that look great on screen are useless on paper. Buttons, navigation menus, sidebars, and ads should be hidden in print. You can also show elements that are hidden on screen, like print-only footers or URLs.

/* Hide on screen, show in print */
.print-only {
  display: none;
}

@media print {
  .screen-only {
    display: none;
  }

  .print-only {
    display: block;
  }
}
    

This pattern lets you have separate content for screen and print. For example, you might want to show the URL of each link when printing, since users cannot click on them.

Page Margins and Layout

Paper has different constraints than screens. You might need to adjust margins, font sizes, and colors for a good print experience.

@media print {
  body {
    margin: 0;
    padding: 0;
  }

  .container {
    max-width: 100%;
    padding: 20px;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
}
    

The last rule automatically adds the URL after every link when printing. This is a classic print style technique that makes printed pages much more useful.