Print versions of websites

With some CSS based trick­ery, you can pro­vide those "PRINT THIS" ver­sions of your pages with­out much effort. May be old hat to some (since almost all major browsers sup­port the alter­nate stylesheets since 5.x ver­sions) but very use­ful. Well, that, and a use­ful way to print links in a printed page with only CSS

If you're using CSS to style your sites, even if you're doing a tabled lay­out, use a print stylesheet to hide the parts that don't need to be printed, and reduce the col­ors to black and white (if appropriate).

The call is simple:

<link rel="stylesheet" type="text/css" href="print.css" media="print">

This will work in most 5.x browsers.

Con­sider embed­ding print-friendly logos in the page as well, and
set­ting them not to dis­play in the page, but to dis­play when printed.
In your print.css file, you can change the col­ors of all your text
and page col­ors to black on white, reset your font siz­ing units, hide
your nav­i­ga­tion bars (con­sider keep­ing any bread­crumb trails and
basic con­tact infor­ma­tion), and gen­er­ally get more space for the
con­tent of the page with­out eat­ing all the col­ored ink in your user's
printer.

Sam­ple sites (use print pre­view in your browser to see how each looks
with­out wast­ing the paper):

• http://algonquinstudios.com/articles/
• http://www.city-buffalo.com/document_253_19.html
• http://roselli.org/adrian/books/handbook.asp

With a lit­tle more code, you can even get the URLs of your hyper­links
to appear with the hyper­linked text in more standards-compliant
browsers:

a:after{content : " [" attr(href) "] " ; }