Make your website print-friendly [Quick Tip]

If your website publish useful informations even when offline, you might consider the idea of making your pages printer-ready.

What does it means?

As you might know you can attach a CSS stylesheet to match a particular target, such as mobile devices or, in this case, the printer.

How to link a CSS only for printers

As you know you can link a CSS stylesheet in html by putting this code before the </head> tag:

<link rel="stylesheet" type="text/css" media="all" href="style.css" />

this code means that this CSS file should be used by any device (all).

You can link as many CSS files as you want, and the rules inside them will be followed with bottom-up priority (the next rule overrides the previous one).

So, if you link a print-friendly stylesheet after the general one, you can adjust conveniently when sent to the printer.

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

Changing the style right before printing

In print.css you can modify or remove all the CSS behaviors that don’t fit a printed sheet nicely.

For example

style.css:

body {
background-image: url(a-very-colorful-img.jpg);
}

print.css:

body {
background-image: none;
}

In the example above we got rid of a the background (smart choice if you want a clean printed page).

This principle applies to everything concerns css.

Example

You can understand this topic better looking at the source code of this demo. Try to print the page if you want, it’s definitively ready for the ink!

demo print demo style.css print.css