Using CSS 2 Media Types for Print Control

This exercise arose from a requirement to format the page differently when outputted to the screen versus sending it to the printer. Fortunately, CSS2 allows us to do just that using the new "@Media" declarations. While total support for these media types is still not there, the "screen" and "print" media types are generally well supported in the current batch of recent browsers - IE 5.5+, Netscape 6+, Opera 6+, etc. Thus, while it cannot be guarenteed to work for all users, for most users (who generally keep their systems relatively up-to-date) it will.

Like all CSS, the declarations can be accessed in a multiple number of ways; it can be linked (or with CSS2 imported), it can be declared at the top of each document, or declared in-line. Since this site often employs different style configurations for different pages, here I have added it to the top of the document. The style declartion looks like this:

<style type="text/css">
BODY {font-family : Tahoma, Arial, Helvetica, sans-serif;}
@media screen
{P.indent {
margin-left: 5em;
font-style: italic;
}}
@media print
{P.indent {
margin-left: 50pt;
color: red;
font-weight: bold;
border: green 1px solid;
padding: 5px;
width: 5in;}
blockquote
{background-color: yellow; font-style: italic;
}}
</style>

...I've deliberately made the Print Media version "funky" so that the changes will be very obvious. While you can certainly do this type of thing, generally the differences would be more subtle. The choice is yours.

And so, to prove that this works, send this page to your printer, or, to save paper, do a print preview. In most browsers, simply go File >>> Print Preview... If you are using a CSS2 compliant browser, the changes should be obvious.