Back in the stone age period of the World Wide Web, there were no real tools for handling your web page layout properly. Back in those days the only way to try to position your content on the page where you wanted it to be was to misuse tables and use invisible spacer images to try to force everything to align to where you wanted it. The effect of using these antiquated techniques for placing all the content for your page where you wanted it to go for display in web browsers is that the pages thus created are extremely unfriendly when you want to print the page since the page probably contains a number of things such as advertising and menu controls that you don't really want to print out with the main content.
While screen resolutions were all 800 pixels wide and below you could at lest still print the pages without having the page overflow off of the right hand side of the sheet because the usable width on the more commonly used paper is about 750 pixels or so for A4 and slightly more for letter paper (exact sizes depending on the built in non-printing margins applied by different printers. As larger screen resolutions became popular the printer friendliness of web pages declined as more and more page layouts suitable for the screen overflow off the page when you try to print them.
The solution that was introduced at that time was what is known as a "printer friendly" copy of the page. This was a second web page with identical content but without all of the ads and navigation and designed to display in a width appropriate for printing. The two pages were attached together by placing a "Printer Friendly Version" button on the web page intended for the screen to link to the copy intended for the printer.
Using this approach with static web pages doubles the amount of work involved in maintaining the site as all content changes have to be applied in two places. Using a Content Management System to generate both versions saves that duplicated effort. This entire approach though suffered from one major problem. Most of your visitors would prefer to see the content without all of the advertising and other clutter of the version intended for the screen and so you would get at least some of your visitors using the "print friendly" version of your page as the one they prefer to read on the screen instead of the version intended for the screen. This would be even more common where the screen version is split into two or more web pages for screen use while the entire article appears on one page for printing.
You still find some web sites using this antiquated approach even today as some web sites are still living in the stone age rather than using more modern approaches. The only time where a separate print friendly page is required now is in the situation where you have an article split into multiple pages for screen use and you want to make a single page version available for printing.
So why is that approach no longer required? Well the introduction of stylesheets is what changed all this. Now instead of misusing tables to do your page layout you can set the page out far more accurately the way you want it by using the appropriate stylesheet commands. What's more stylesheets allow you to specify which media that you want a specific command to apply to and so you can specify different styles for the screen to that which you define for printing. By hiding elements from one media and showing them in the other you could even have the print version of the web page display completely different content to that of the screen version (although why you'd want to do that I don't know since it would just confuse people).
The same web page that is print unfriendly in what displays on the screen can be extremely print friendly when printed and so the "Print Friendly Version" buttons can be dispensed with from your web page completely. Of course doing away with that button does away with the indication that the page is suitable for printing that the button also provided. We can make up for that lack by adding a print button in its place. A print button in the web page will simply duplicate the functionality of the print button that your visitors already have in their browser toolbar. All that having a print button in the screen version of your page tells people is that you expect that people will want to print your content (which the "Printer Friendly" buttons also advised along with their other functionality).
So how do we add a print button to out web page so that your visitors will know that you expect that they will want to print your page? Well that's were a little JavaScript comes in.
