Create a Print Stylesheet

Have you ever looked at what your website looks like printed out? Right now go look at a preview of your website. Does your website look terrible in print preview? It most likely does if you do not have a css stylesheet custom made for printing. Often, we have ads or or flashy things that we really would not want printed out. We want our print outs to look professional almost like a printed advertisement to anyone who sees them. Think about it... Whenever someone prints out your webpage, it is a good possibility others will see it. This is an excellent chance for you to beat out your competition with offline marketing. Let's start by telling the browsers where they can find our print stylesheet.

<link href='http://www.afterhoursprogramming.com/styles/print.css' rel='stylesheet' type='text/css' media="print"/>

Of course, this is the one on my website, but you should change the "href" attribute to point to your new print.css. The important thing to notice is the "media" attribute that is set to "print" instead of screen. Once, a browser sees that you have a print stylesheet, any time the user decides to print, the browser renders the new page according to the new print stylesheet. You should place this tag in the head section of your web page to ensure that it is rendered immediately.

Basically, your print stylesheet will probably contain mostly classes that have "display:none;" properties. The idea is to hide the irrelevant flashy stuff on your website, and only show the useful and relevant information. Part of my print.css contains css stylesheet like:

.sidebar-container {

	display: none;

}

When users print out my website, I do not want them to show everyone my navigation. I want to create my big endorsement at the top, and give them the raw text they want on the rest of the page. I know we have grown up in the electronic atmosphere, but people do print things and they print a whole lot. So, you should definitely consider adding a print stylesheet to your pages.