CSS Print Stylesheets — Print in style!

Written by
Typical Read
2 minutes

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.

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 >

1 comment on “CSS Print Stylesheets — Print in style!”.

# Jul 23, 2014

great. nice idea to embed QR code.

Join the conversation.

Your email address will not be published. Required fields are marked *

All comments posted on 'CSS Print Stylesheets — Print in style!' are held for moderation and only published when on topic and not rude. Get a gold star if you actually read & follow these rules.

You may write comments in Markdown. This is the best way to post any code, inline like `<div>this</div>` or multiline blocks within triple backtick fences (```) with double new lines before and after.

Want to tell me something privately, like pointing out a typo or stuff like that? Contact Me.