Feature
Post

Category
Code


Adding a Print Stylesheet to Your Site

I like to print stuff out. Not that I have print outs of every email I receive or anything- it’s mostly recipes for testing in my home-based bakeshop. The point is, I am so grateful whenever I print from a website with a print stylesheet. Imagine not having to print out pages and pages of huge banner images or ads, or resorting to copy and pasting into a separate document!

If you don’t use print stylesheets yet, here’s a quick and easy way to get started:

Create a new stylesheet.
Save it in the same directory as your other stylesheet(s) as “print-styles.css”.

Don’t display unnecessaries.
Your visitors usually won’t want to print out the header image of your website (pretty as it may be), so you want to set that to display:none. Other elements you might not want to include are your sidebar, comments, or section for ads. So you do something like this:

#header, #sidebar, #comments, #adspace {display:none}

Remove borders on linked images.
Some browsers print out images with links with unsightly purple borders around them. So:

img {border:none}

Change anything else you want.
You could leave it as is, or vary the styles- such as increasing text size- according to however you think the printed page should look. I suggest testing by printing out a page or two, and go from there.

Once your print stylesheet is ready, make sure to link to it in the header of your website like so:

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

And that’s it! Pretty painless, eh?

Do you use print stylesheets on your websites?


  1. By Harry Roberts posted on August 14, 2009 at 7:55 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Another good tip is this one:

    a:link:after, a:visited:after{
    content:” (” attr(href) “)”;
    font-size:90%;
    }

    just so users can see where hyperlinks actually point to (seeing as they can’t click them).

  2. By Alaska Web Design posted on September 1, 2009 at 3:30 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    At Affordable Alaska Web Design Company we limit our printable pages to 770px for most printers.

    I also like the font-size:90% above in the first comment.

  3. Trackback