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.

CSS Print Stylesheet Tips & Tricks

People still print web pages. Just think about articles, blog posts, recipes, contact information, directions or real estate sites. Someone somewhere will eventually try to print one of the pages you made. Follow these useful tips and tricks to optimize your site for print.

Make color changes explicit.

Most browsers will automatically reverse colors to save toner ink. This can sometimes cause problems with the quality of the printed page. For best results, make color changes explicit.

Remove unneeded page elements.

Generally, the goal for printed pages isn’t to provide an exact screenshot of what’s seen on the screen. Instead, to provide a well-designed print version of it. Elements like navigation bars and search forms aren’t needed on printed versions, so remove those to save both room and ink.

Set page width & margins.

Make sure your content is getting printed edge to edge by setting the body width to 100% and defining the page margin. I’ve seen some sites that go a little further and provide users some extra space for handwritten notes on the page.

Avoid odd page breaks.

Make sure your content doesn’t get spilt up across multiple pages at odd points. This can sometimes be the biggest headache when creating print stylesheets.

Force background images & colors.

Some pages require background images and colors to appear correctly. You can force these colors to show when printed in color with WebKit browsers (Chrome or Safari) using a separate media query. Unfortunately, at the time of writing this article, there’s no equivalent for Firefox, Opera or Internet Explorer (no big surprise there).

Remember, this is a printed version of the page so users have no way to access links without knowing the URL of those links. Providing a reference to the linked URLs tell’s users where those links go to. Take a look at the HTML code below:

Here’s the printed result of the code above:

With the holidays coming around the corner, many people are looking for unique gift ideas < http://www.knowgifts.com > to surprise their loved ones.

One problem with the code above is that both anchor links and linked images will also get expanded. We can fix that with a countermand CSS rule:

Selecting links around images can be more difficult since CSS doesn’t currently allow for selections of elements based on its children. This get’s remedied with the CSS4 parent selector:

CSS4 also makes expanding external links easier:

Provide QR codes for easy URL references.

Using Google’s Chart API, you can provide users a QR code on printed pages. There’s a downside to this approach, because you have to define the URL in the style. If you’re running PHP or another dynamic scripting language, this can be fixed by providing the URL automatically:

Worth-while CSS Print Articles & Tutorials

Check out these other great articles and tutorials regarding CSS printing:

1 2


  1. great. nice idea to embed QR code.

Leave a Reply

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

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

All comments are held for moderation and only published when on topic and not rude. You'll even get little stars if you do an extra good job.

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.

icon-search icon-link