best resources for free icons on the web

styling CSS for printer-friendly page

To help you write the CSS styles for a printer-friendly page, change the media of the regular style to "tty" and the media of the print style to "screen." From the simple stacked layout of the "tty" page, you can hide and show the appropriate divs in order to create a clean, simple print page.

[link href="css/sidebar2.css" rel="stylesheet" type="text/css" media="tty"]
[link href="css/print.css" rel="stylesheet" type="text/css" media="screen"]

When done styling the "screen" page, change the "tty" page back to "screen" and the "screen" page to "print." And follow-up with writing the HTML codes to share your "printer-friendly" page!

Voila! :)

html for printer-friendly page

Found this great article on how to code HTML for printer-friendly pages, and it works!

Here's the important snippet on how to code the HTML for a printer-friendly button option:

If you also want to add a "Print this page" button your blog, add the following HTML snippent anywhere on the page.

[a href="javascript:window.print()"]Print Page[/a]

Remember that the above creates a printer friendly version only in memory and directly submits it to the printer. The user is not able to see the electronic version of the print version unless he prints it to PDF using Acrobat or other PDF creation tools.

If you want to build a functionality like The New York Times or Wall Street Journal paper where readers have an option to convert any HTML page into a text only version which can then either be printed or saved an HTML text file for offline reading, stay tuned for the next part of this tutorial. It involves HTML forms and query parameters.