Chris CoyierWhy Your Blog Should Probably Have a Print Stylesheet

Written by Chris Coyier from CSS-Tricks on February 29, 2008

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!

Written by Chris Coyier from CSS-Tricks on February 29, 2008 | Filed Under CSS

Share with others

  • StumbleUpon
  • Add to Delicious
  • Mixx

3 Responses so far | Have Your Say!

  1. Ross  |  February 29th, 2008 at 10:53 pm #

    Ross - Gravatar

    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?

  2. Chris Coyier (Post Author)   |  March 1st, 2008 at 9:31 am #

    Chris Coyier - Gravatar

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

  3. Jarod Clark  |  April 29th, 2008 at 1:03 am #

    Jarod Clark - Gravatar

    An often overlooked element. Great idea.

Trackbacks to 'Why Your Blog Should Probably Have a Print Stylesheet'

Leave Feedback

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>