CSS Print Stylesheets — Print in style!

CSS print stylesheets are often overlooked, if ever even thought about. Most frontenders are more obsessed with pixels than printers. Often, what get’s printed and what’s shown on the screen are completely different. From images wrapping in odd places to cut off pages, printing webpages can sometimes be a big headache. In this post, I’ll go over some helpful tips and tricks when creating these stylesheets that’ll save you hours of frustration — and make your site print in style!

Jump straight to the print stylesheet tips & tricks:

• How to setup a print stylesheet — the media query.
• Make color changes explicit.
• Remove unneeded page elements.
• Set page width & margins.
• Avoid odd page breaks.
• Force background images & colors.
• Display link URLs.
• Provide QR codes for easy URL references.

CSS print stylesheets, why?

Optimizing web pages for print is important because we want our sites to be as accessible as possible, no matter the medium. We shouldn’t make assumptions about our users and their behavior.

In a time when everything seems to have a screen, feels like the only real paper we use is bathroom tissue. So it might seem odd to write about the long-forgotten habit of printing a webpage. Nevertheless, as odd as it might seem to visionaries and tablet manufacturers, we’re still far from the reality of a paperless world. Tons of paper float out of printers worldwide every day because not everyone has a tablet or a computer that’s in reach. Moreover, many feel that written text is just better consumed offline. A perfect example of this are recipes — people love printing recipes! Optimizing web pages for print is important because we want our sites to be as accessible as possible, no matter the medium. We shouldn’t make assumptions about our users and their behavior.

A print stylesheet is useful and sometimes even necessary. Some readers might want to store your information locally as a well-formatted PDF to refer to the information later on when they don’t have internet. However, print styles are often forgotten in the age of responsive web design. The good news is that a print style sheet is actually very easy to craft: you can follow a couple of simple CSS techniques to create a good experience for reader to deliver a better user experience.

How to setup a print stylesheet — the media query.

@media print {
  // Place your print styles here
}

Remember, you don’t need to recreate your entire CSS. Most all styles are inherited by the print query, only the differences should be defined.

Keep reading — CSS Print Stylesheet Tips & Tricks >