Web Pages Designed With Your Wallet In Mind!

Print media stylesheets are supported in IE5+, NS6+, and Opera 7+.

Have you always wanted to know how to eliminate all those unnecessary graphics, colored backgrounds that add nothing to a printed page and more?

Using CSS2's support for the print media, you can remove, trim and even do away with redundant elements or content as the page is fed to the printer. There's nothing like providing a printer friendly page for your viewers and making them happy by saving their ink supply.

The below CSS makes the page's text black on a white background, removes the top banner and left and right navigational areas, and expands the main content area to be 100% of the page's width when it's printed out.

Here's an example of the print media in action:

NOTE: "Print friendly button" function coming soon so you can see this in action.

	<style type="text/css">
	@media print{
	body {
	background-color: #fff;
	background: transparent;
	color: #000
	}

	#ad {
	display: none;
	}

	#leftbar {
	display: none;
	}

	#rightbar {
	display: none;
	}

	#contentarea {
	width:100%;
	}
	}
	</style>

Below shows examples of specifying CSS Media types.

There are 3 ways to attach a media type to the style sheet, so your CSS is applied only when a particular media is used to view the page:

Example 1.) Linked style sheets:

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

The above declaration, "print.css" will only be applied to the page when it's printed or viewed in Print Preview mode in your browser. For other media types, just add additional linked style sheets targeting those media types.

For those using XML documents, the equivalent of the example above would be:

<?xml-stylesheet type="text/css" media="print" href="print.css" ?>

Example 2.) Imported style sheets:

	<style type="text/css" media="print, handheld">
	@import "basic.css";
	</style>

Imported style sheets have the advantage of being conditionally downloaded, meaning the style sheet will only be downloaded if the devise matches that specified in the media attribute. In low bandwidth devices such as a handheld, any savings in unnecessary bandwidth could be significant. The disadvantage of this technique at present is the lack of browser/device support relative to technique Example 1.) above.

The @import rule links to an external stylesheet from within a stylesheet (external or in a STYLE element), however, early browsers do not understand the syntax and simply ignore the statement (and the stylesheet it references). For more information see "The @import Hack", CSS2 Media Types at W3C.org and "Abridged Guide to CSS2 Support" for just three sources.

Example 3.) Inline style sheets, through the @media rule:

	<style type="text/css">
	@media projection{
	body{ background-color: #fff; }
	#heading{ font-size: 28px; }
	}
	</style>

As you can see, whatever CSS declarations you wish be applied only for "Projection" should be wrapped around in the @media block.

CSS Media Types:

Media Type	Description
all	Suitable/intended for all devises (default)
aural	Intended for speech synthesizers
braille	Intended for braille tactile feedback devices
embossed	Intended for paged braille printers
handheld	Intended for handheld devices (typically small screen, monochrome, limited bandwidth)
print	Intended for printed documents (applies to docs viewed in print preview mode too)
projection	Intended for projected presentations (ie: projectors or print to transparencies)
screen	Intended for computer screens
tty	Intended for media using a fixed-pitch character grid (ie: teletypes or terminals)
tv	Intended for television-type devices

For those who have wondered about those "printer friendly buttons" on some pages and how they work. There really is no such thing as a printer friendly button per se. It is just an hyperlink to a new page that has little or no graphics on it and the text is arial or verdana on a white background and aligned properly. The button does not make the page "printer friendly". You do, through your efforts using the above techniques.