Previous Post: ViewSonic VX2235wm 22" widescreen LCD
Next Post: CSS: Media types

CSS: Create a style sheet for print only

Posted By Scott Klarr on Dec 09, 2007 at 1:15 am

Im sure everybody has had experience printing a webpage and had less than perfect results when EVERYTHING on the page is printed including banners, navigation, textures, crazy colors, etc. When I needed to print out only the content of a page, my solution was typically to just select the specific content I wanted, and then choose the "print selection only" option, but that limits flexibility of data selection and formating.

There is an excellent solution for webmasters to offer built in "printer friendly pages" by using an alternate css style! Doing so allows you to hide certain components, such as navigation, ads, and any other items that don't really need to be printed. You can also specify more print-friendly fonts, line heights, text size, paragraph & header paddings - everything is customizable! I have a printing style setup for this page right now that you can see in action! Just go up to File -> Print Preview and you can see exactly how the formating is defined differently. You can even print this page out (in fact, you are welcome to print out any pages from this site).

Here is your typical style sheet inclusion code that goes in the head of your source:

Below is the updated code that includes the printer style sheet (in bold):

Note that the magic of this code is the media="print" property; without it, the browser would just go ahead and include the style sheet and display it as a normal style.

For a list of other available media types that you can target, see Media Types

Related Links

Comments (1)

Post Comment