explodingboy

Creating a stylesheet for print is fairly simple to do for anyone who has even a little experience playing with CSS. Most smaller blogs I run across have no printing styles. A print stylesheet is an entirely separate set of styles that are called once someone decides to print your website. If you print out this website you will notice that the top and bottom navigation, as well as the Recent Post, Comments, etc. are not printed. Removing elements such as navigation, banners, large images and backgrounds saves ink. Print-friendly versions also avoid problems with printer reformatting and normally use fewer pages than directly printing a web page.

The following are some ideas of what you to can do with print stylesheets:

• Add or remove defined page elements such as navigation aids, images, and search boxes
• Suppress background colors and background images
• Change font type, size, and measurement.
• Change text line-height for better readability.
• Write out URLs for links through generated content. (advanced browsers only)

Let’s take a look at my current print.css
The Basics:
html {
width:100%
}
body {
background: white;
font-size: 12pt;
}
img {
border: 0;
}
These are fairly straightforward styles. Printers don’t print white, so I set the page’s background to be white, made the font size 12pt, and did away with any borders on images. Many people hide all of their images, but I like having my header image print on every page.

Hiding Elements:
#nav, #botnav, #footer, .col, .google {
display: none;
}
These styles hide all of the elements listed when your site is printed. You can add all the elements you want by just separating them with commas in this one style.

Links:
a:link, a:visited {
color: #FF0000;
background: transparent;
font-weight: bold;
text-decoration: underline;
}
.primary a:link:after, #content a:visited:after {
content: ” (” attr(href) “) “;
font-size: 90%;
}
.primary a[href^="/"]:after {
content: ” (http://www.yourdomain.com” attr(href) “) “;
}
These styles underline all links and transforms a value like /yourpost/ into http://www.yourdomain.com/yourpost/.

Now let’s look at the all of our styles.

The entire stylesheet:
/* Basic Structure */
html {
width:100%
}
body {
background: white;
font-size: 12pt;
}
img {
border: 0;
}
/* Hide Various Elements when printing */
.hiddenitem, #hiddensidebar, .morehiddenstuff {
display: none;
}
/* Link Management */
a:link, a:visited {
color: #FF0000;
background: transparent;
font-weight: bold;
text-decoration: underline;
}
.primary a:link:after, #content a:visited:after {
content: ” (” attr(href) “) “;
font-size: 90%;
}
.primary a[href^="/"]:after {
content: ” (http://www.yourdomain.com” attr(href) “) “;
}

Adding the stylesheet to your website:
Once you have created your own personal print stylesheet, save it, and upload it to your server. Next, you will need to place a link to you print stylesheet into the HEAD area of your document simliar to the following link: link rel="stylesheet" type="text/css" href="http://www.yourdomain.com/print.css" media="print"

Alternatively, you could add your print styles into your main stylesheet by adding the following:
@media print{
.yourstyleA {
blah blah;
}
.yourstyleB {
blah blah;
}
}

Be sure that you surround your print styles with brackets. I recommend the first method of just linking to another separate stylesheet, but either should work just fine. Choose which option is best for you.

That is more or less it. You can create a very simple, basic, but effective stylesheet for printing in no time at all, and save your vistors a lot of headaches when printing your site.