PureNews

PureNews is an amazingly sleek and powerful news theme with unlimited color variations.

View full feature list Check out the live demo Buy this theme today

Why Your Blog Should Probably Have a Print Stylesheet

Posted by on 29th Feb 2008 CSS 3 comments

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:

  1. If it’s a really long article, consider putting page breaks before important sections.
  2. Re-declare your font-sizes in point (pt) values instead of whatever you are currently using for better and more consistent results.
  3. 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.
  4. 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!

3 comments - Leave a reply
  • Posted by Ross on 29th Feb 2008

    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?

  • Posted by Chris Coyier on 1st Mar 2008

    @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" =)

  • Posted by Jarod Clark on 28th Apr 2008

    An often overlooked element. Great idea.