If your blog has well-written and informative articles, like any good blog should, you should probably have a well-formatted print stylesheet declared. Just like your regular “screen” CSS controls how your webpage looks in a browser, the “print” stylesheet controls how your webpage prints on a printer.
First things first, you need to declare the stylesheet:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
Alternatively, you can pack all your “media styles” into one stylesheet, which is efficient as it reduces the number of server calls your page needs to make. Within a single CSS file, you can declare media types as such:
@media print {
/* Print Stuff */
}
@media screen {
/* Screen Stuff */
}
There is lots to think about for your print stylesheet, but I’ll just mention a few tips and tricks to get to started:
- If it’s a really long article, consider putting page breaks before important sections.
- Re-declare your font-sizes in point (pt) values instead of whatever you are currently using for better and more consistent results.
- Remove all the unnecessary junk. People don’t really need to see your navigation and sidebar (or even probably your header) on the printed page. If your page is marked up fairly semantically, just set the display value to “none” for these sections in your print stylesheet.
- Links in posts won’t do anybody any good on the printed page if you can’t see the URL. You can actually use CSS to display the URL right in the print stylesheet.
If you really wanna get fancy, you could create a custom header that is exclusively for the printed page. Just hide it in your regular stylesheet and display it in your print stylesheet. This could include a custom message letting people know basic information about your site and reminding them to visit for fresh content.
If a user goes through the trouble to print one of your articles, that is a great sign. You might as well make sure the product they get from it is nice. That printed page will really help stick your website into the mind of whoever printed it. Can’t beat that!






Ross | February 29th, 2008 at 10:53 pm #
Ok I am new to blogging. So I have a question. So you can control how a page will print but what do you put on the print.css and then that info is conveyed to the printer to print as it should? Am I understanding this right?
Chris Coyier (Post Author) | March 1st, 2008 at 9:31 am #
@Ross: That’s right! All the style information you put in your print.css file will be conveyed to the printer when the web page is printed. So in order to do your testing, you’ll have to do a lot of “print previews” =)
Jarod Clark | April 29th, 2008 at 1:03 am #
An often overlooked element. Great idea.