CSS: Create a style sheet for print only

Posted On Dec 09, 2007 at 1:15 am
4 Comments

I'm sure everybody has had experience printing a webpage with 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 formatting.

There is a simple 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 need to be printed. You can also specify more print-friendly fonts, line heights, text size, paragraph & header padding - 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 formatting 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:

<head> <link rel="stylesheet" media="screen" type="text/css" href="style.css" title="Default" /> </head>

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

<head> <link rel="stylesheet" media="screen" type="text/css" href="style.css" title="Default" /> <link rel="stylesheet" media="print" type="text/css" href="print.css" /> </head>

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 during browsing and apply its styles.

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

This topic has the following tags: