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.
Published
Typical Read
2 minutes
Sponsored
Do you run a development agency, freelance developer or offer website services. Contact me today for information about advertising.
Find your next web developer job
jobs by Indeed

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 >

Did you find CSS Print Stylesheets — Print in style! useful? Get articles in your inbox.

…and don’t worry, I hate spam as much as you. Expect to hear from me at most once a week.

Latest Job Postings
Posted on Aug 9, 2020 at 9:17pm
Full-time
Los Angeles
Posted on Aug 9, 2020 at 9:15pm
Full-time
Los Angeles
Posted on Aug 9, 2020 at 1:19am
Littleton, CO
jobs by Indeed
Sponsored
Sponsor my site by donating to help support open-source projects, like WordPress Zero Spam, Referrer Analytics & others.
Sponsored
Do you run a development agency, freelance developer or offer website services. Contact me today for information about advertising.
Sponsored
Need help with website, a boost in ranking or online marketing? Contact me today for a free quote.
Sponsored
Sponsor my site by donating to help support open-source projects, like WordPress Zero Spam, Referrer Analytics & others.
Sponsored
Help support open-source projects & pro-bono non-profit services by donating today.

1 Comment on “CSS Print Stylesheets — Print in style!”

# Jul 23, 2014

great. nice idea to embed QR code.

Leave a Reply

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.