As the internet continues to grow as a source for news and information, there is a growing need for websites and blogs to be printer-friendly.  Whether you run a news site, a recipe blog, or simply offer your opinions to your readers, it is inevitable that people will want to print your content. 

Unfortunately, many web designers aren’t including separate stylesheets for printers with their designs.  As a result, we decided to write this tutorial to explain how to create a print stylesheet.   Due to most of our readers being on WordPress, we will place our focus there, though this can be adapted for just about any blogging platform!

What is a Print Stylesheet?

Lets start with the definition so you know what we are talking about.  A print stylesheet is an alternate stylesheet for a website or blog that your website will use whenever someone attempts to print a page off of your blog instead of the standard stylesheet.

How Does a Print Stylesheet Work?

A print stylesheet overrides any designated style.css code when someone attempts to print a page off of your website.  If a print stylesheet is created correctly, people printing a webpage will avoid printing the unnecessary elements, such as the header, footer, and sidebars.

How do I Make a Print Stylesheet?

First thing you need to do create your print.css file. This can be done by taking a blank Notepad (or equivalent) file and naming it print.css.  You can also make a copy of your blog’s style.css file and rename it, then remove the code within the copy.

What Code Do I Put Into My Print Stylesheet?

Depending on the setup of the theme your blog is using, this step will either be pretty easy or incredibly difficult.  Basically, we don’t want things like your header or sidebars to appear in your print stylesheet, so you’ll want to setup your print stylesheet to remove these elements:

#header, #nav, #sidebar, #footer .noprint {display: none;}

Depending on how the div id’s are setup, what you put above will vary.  In other words, use the above as a guide, but customize it to match your theme.  You can also use this method to censor out images and other unwanted elements of your post pages (if applicable).  Lastly, if you have your contact information in your footer, you may want to consider leaving the footer on your prints.

Next, you will want to expand your content section so that it looks decent when printed, instead of the content margins your standard style.css uses.  It will probably look something like the following:

#content {width: 100%; margin: 0; float: none;}

Now, to ensure that alternate colors are not picked up when printed, you’ll want to do something like the following to make sure it prints using black ink:

a:link, a:visited {color: #000000}

Because most people use white paper, this should make your printouts better looking.

How To Tell Your Theme to Use the Print Stylesheet

Once you’ve built and uploaded your print stylesheet, the next step is of course to tell your theme to use it when someone prints something!  This is probably the easiest step of all!  You’ll want to simply paste the following code into your themes header file (we recommend placing it just below the standard style.css code):

<link type="text/css" media="print" rel="stylesheet" href="<?php bloginfo('template_url'); ?>/print.css" />

So, there you go!  Hopefully if you’ve followed these steps, and uploaded your new print.css file to your WordPress blog’s theme, anything printed from your website will look much better.