The other day I went to print out one of my posts, and was quite surprised at how it turned out (Check the screenshot below). This would simply not do. There may not be a lot of people wanting to print any of my posts but I still would like the page to print properly. Back in the olden days of the wild wild web, the solution would have been to create a separate page meant for printing; but with the dawning of the age of the CSS, it is now as easy as attaching a separate stylesheet to my site which gets called when I want to print it.
Kunaals Blog Print Preview

Here is what I did to create my print stylesheet
I started by creating a blank css file called ‘print.css’ and uploaded it to my site, I then added the following line in the header file of my wordpress template

<link rel="stylesheet" href="http://www.SITENAME.com/blog/PATH-TO-FILE/print.css" type="text/css" media="print" />

I also changed the call to my default stylesheet from

<link rel="stylesheet" href="http://www.SITENAME.com/blog/PATH-TO-FILE/style.css" type="text/css" />
to
<link rel="stylesheet" href="http://www.SITENAME.com/blog/PATH-TO-FILE/style.css" type="text/css" media="screen" />

(i.e. I added media=”screen”, this removes the default stylesheet from the page when printing)

Thats the easy part now taken care of
(A little tip, if you upload your print.css file to the same place your template’s default css file is, you will be able to edit it via your wordpress admin interface)

Once the file is in place, I looked at what had been printed and identified all the information that while useful online was not required on paper(marked in red in the image). For example, The entire menu, the social network links, the category posted to information, the sidebar and the page footer. I looked into the source code of the page and found the ids and classes that were wrapped around these site elements and entered them into the stylesheet with a ‘display:none;’
This is what the stylesheet starts out with, I want to define the sizes of my logo, tagline, content, and h1’s etc

/*Make sure that the background will remain white*/
body {
   background: white;
   font-size: 12pt;
}
/*Remove the unwanted categories from displaying*/
#header-links, #sidebar, #nav-wrap, .sociable, #respond, #commentform, #footer-wrap, .post-footer {
   display: none;
}
/*Set the font size for the H1s on the page*/
h1 {
   font-size: 14pt;
}
/*Set the font size for the logo "Scattered Thoughts"*/
#logo-text {
   font-size: 20pt;
   text-decoration: none !important;
}
/*Set the font size for the tag line "where good ideas go to die"*/
h2#slogan {
   font-size: 10pt;
}

Now all this is pretty good and gives me a fairly plain page when I go to print, but there are still a few things I want to change.
I want the post content to be shifted slightly to the right. My post content is located in a div with the class ‘entry’, so I add the following lines to my stylesheet

div.entry {
   margin-left: 5%;
   padding-top: 1em;
   border-top: 1px solid #999;
}

This pretty much looks exactly like what I want to see when I print the page, except for one last important (to me) thing.
When I add links in a post and I print the page out, those links get lost, because there is no way for me to see which page I was linking to on the piece of paper.
Once again CSS comes to the rescue, using css pseudo-elements I am able to add the physical link address onto the printed page, without actually making any changes to my template, or my posts!

a:link:after, a:visited:after {
   content: " (" attr(href) ") ";
}

Now this will add the physical url in brackets right after the link on the page. This works great, but the links appear this way in the entire printout. Since I do not want all the links on my page appearing with their physical address, I change this CSS slightly to only work for the content within the ‘entry’ class

.entry a:link:after, .entry a:visited:after {
   content: " (" attr(href) ") ";
}

This is what the css sheet looks like after everything

/*Make sure that the background will remain white*/
body {
   background: white;
   font-size: 12pt;
}
/*Remove the unwanted categories from displaying*/
#header-links, #sidebar, #nav-wrap, .sociable, #respond, #commentform, #footer-wrap, .post-footer {
   display: none;
}
/*Set the font size for the H1s on the page*/
h1 {
   font-size: 14pt;
}
/*Set the font size for the logo "Scattered Thoughts"*/
#logo-text {
   font-size: 20pt;
   text-decoration: none !important;
}
/*Set the font size for the slogan "where good ideas go to die"*/
h2#slogan {
   font-size: 10pt;
}
/*Shift the content a little to the right*/
div.entry {
   margin-left: 5%;
   padding-top: 1em;
   border-top: 1px solid #999;
}
/*To display code on the page*/
code{
  display: block;
  padding: 20px;
  text-align: left; 
  overflow: auto;
  font-size: 10pt;
}
/*To add the physical link on the page*/
.entry a:link:after, .entry a:visited:after {
   content: " (" attr(href) ") ";
}

There are still further useful additions one can make to this code, like expanding abbreviations, writing the physical link as a footnote instead of in brackets etc. I am still working on a couple more changes that I intend to post in the near future. Let me know how these changes go on your site.
Here is what the page looks like now after the addition of the stylesheet
Kunaals Blog Print Preview After