Path // www.yourhtmlsource.com → Stylesheets → CSS AND MEDIA TYPES

CSS and Media Types

by Ross Shannon

Web pages are often thought of purely in terms of the computer screen. What many developers do not fully appreciate is that the web is increasingly a multi-medium information source. Many people prefer to print pages out, while in recent times new software like aural and Braille browsers have been made available so that pages can be accessible to everyone. CSS-2 brought along a way to apply different styles to a page dependant on the medium it is being used through.

Clock This page was last updated on 2012-08-21


Defining the Media Type

First let us have a quick think about what possibilities this opportunity to restyle your page for a different output medium gives us all as designers. You’ve probably witnessed what a mess some pages can look once they’ve been transferred onto paper — useless navigation areas and ads take up space, paper and ink. The page can often look cluttered and can become illegible given the more restricted dimensions of the page.

Over the last few years it has become customary for large sites to offer links to ‘printer-friendly’ pages — separate pages that were stripped of this unnecessary content. These pages were time-consuming to generate and costly to maintain, and so disparities between the content on the two versions of the same page often crept in. With the simple CSS methods in this tutorial, nothing more than a second stylesheet would be necessary for all of these pages to print perfectly.

There are even more browser types to consider, such as aural browsers, which read webpages aloud to their users; or Braille displays, which can create interfaces from a webpage readable to their blind users. The software that drives these applications will often include a default stylesheet which will apply stylings relevant to the medium, but now you can get in there and add your own styles to these outputs.

Browser Compatibility Note:

Alternate media stylesheets are supported by » Firefox, » Mozilla, » Internet Explorer 5+ and » Opera 7. Netscape 4, as you can imagine, does not support them; though it doesn’t do anything silly with them either, and ignores them safely.

Media Options

There are ten different media types defined in the » CSS-2 specifications. They are:

  • all (default if no other is specified)
  • aural
  • braille
  • embossed
  • handheld
  • print
  • projection
  • screen
  • tty
  • tv

Making the Association

A linked stylesheet can be associated with a media type by simply adding the media attribute to the link tag:

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

If the stylesheet above was linked to your document, the style rules it contained would only be applied when the page was printed out — they won’t show up when you view the page on a monitor.

Imported stylesheets are classed similarly. You can apply a stylesheet to multiple mediums by adding a comma-separated list.

<style type="text/css" media="braille, embossed">
@import "../tactile.css";
</style>

Finally, inline style rules can be associated with a medium by wrapping them in an @media block:

<style type="text/css">
@media print {
    h1 {font-size: 22pt; background: white; }
}
</style>

Putting them to Work

Now it’s time for some practical tips on actually writing your new stylesheets. Restyling for print will probably be of interest to the majority of you, so here are my suggestions.

Using the CSS display property you can take redundant elements out of the visual display. I apply this to all of the navigational areas of my page like this:

td#navigation, table#footer, div.banner {display: none; }

The above method should also be used to pluck advertisements from the printout. If a user can’t click on an ad, it’s not going to be of much use to them.

We then set all of our content areas to take up the full width of the page. As you would expect, leaving widths defined in pixels gives unpredictable results when translated to paper. To save on ink and increase legibility, text and background colours are set to black on white in as many cases as possible.

table#main {width: 100%; background: white; text: black; }

You may also choose to change the font of your text to something more suitable for print. This step isn’t necessary to produce a good printable page, and it’s up to you whether you incorporate it. Usually, serif fonts look better in print than on screen, whereas it is the opposite for sans-serif fonts. Georgia and Times New Roman are both good fonts for offline reading. Print is also the medium where defining your text size in points is most appropriate.

Print out a page from HTML Source to see the changes I’ve made to the layout. You can also see our print stylesheet itself.

sourcetip: You can test your print stylesheet on your screen with your browser’s Print Preview feature. I recommend adding it to your toolbar while you create your new print stylesheets.