Build Up Your Print Stylesheet

Print stylesheets should be used to reset styles, hide elements, and boost the font-size. It should not be a total re-write of your other stylesheets.

You have the right media types set, right?

All of your main stylesheets should have media="all" as an attribute. The print stylesheet should have an attribute of media="print" and should be the last stylesheet loaded.

<link href="css/reset.css" rel="stylesheet" media="all">
<link href="css/main.css" rel="stylesheet" media="all">
<link href="css/print.css" rel="stylesheet" media="print">

The print stylesheet should be attached to every page, regardless if it is a print-specific page. File » Print will still trigger the print stylesheet.

With the right media types inplace you can edit the print stylesheet using Firebug and the Web Developer Toolbar (CSS » Display CSS by Media Type » Print)

Gotchas

• Background images are ignored by default and their is no way you can control that. Important graphics like logos should be inline <img>.
• IE chokes on overflow CSS so be sure to reset any elements that need it with overflow:visible;
• Set container elements to a relative unit like percentages for a fluid layout that will print nicely on any sized paper.
• Reset any colored text to black for a better contrast.