CSS Print Stylesheets — Print in style!

An often overlooked part of development are CSS print stylesheets. Printing pages directly from the browser can lead to frustration. Done right — you can have an optimized page that uses a minimum amount of ink and paper and ensures that everything is easy to read.

CSS3

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:

CSS print stylesheets, why?

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 >

Author: Ben Marshall

Red Bull Addict, Self-Proclaimed Grill Master, Entrepreneur, Workaholic, Front End Engineer, SEO/SM Strategist, Web Developer, Blogger

2 thoughts on “CSS Print Stylesheets — Print in style!”

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.