Specifying Stylesheets for Specific Media

I'd bet most of you have loaded a Web site on a device like this:

Stand up if you've ever loaded a site page on a device like this:

Now raise your hand if you've ever tried to read a Web page on a medium like this:

You may have noticed that the Web page becomes more or less suitable for usability and reading on each of these three media. CSS gives us an easy way to specify a seperate stylesheet for screen, handheld, and print media using either the STYLE element with @import or the LINK element. The really good news is nowadays most current browsers support these media types natively.

Media Types Using the LINK Element

If using LINK to embed an external stylesheet, one can use the MEDIA attribute to specify the type of media that this particular CSS should be used for.

Notice that each LINK has a separate MEDIA attribute value on each of these elements, telling the browser to only load this CSS if on a given media type.

The MEDIA values are preset in HTML 4.0 and on as described in W3C's HTML 4.0 Media Descriptors:

screen: Intended for non-paged computer screens. The default value.
tty: Intended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities.
tv: Intended for television-type devices (low resolution, color, limited scrollability).
projection: Intended for projectors.
handheld: Intended for handheld devices (small screen, monochrome, bitmapped graphics, limited bandwidth).
print: Intended for paged, opaque material and for documents viewed on screen in print preview mode.
braille: Intended for braille tactile feedback devices.
aural: Intended for speech synthesizers.
all: Suitable for all devices.

Note that according to the DTD the default value of MEDIA is "screen", so if you don't specify a MEDIA value "screen" is assumed. Also, most browsers will try to use the "screen" CSS if no other CSS is present for the current media type.

Finally, you can specify that a single CSS is to be used on multiple media simply by comma-separating the values of MEDIA:

Media Types Using @import

My own preferred method of embedding external CSS is to use the STYLE element with @import. We can specify media types using STYLE several different ways. Here's the most basic approach:

The above method is very similar to the LINK method shown above.

Media Types Using @media

In addition to importing an external CSS for each media type, we can specify the media type inside the CSS itself (including withing STYLE) using @media:

@media screen {
   body {
      font-family: Verdana, sans-serif;
      font-size: .875em;
      width: 55em;
      margin: 0 auto;
   }
}

@media print {
   body {
      font-family: Times New Roman, serif;
      font-size: 11pt;
      width: 7.5in;
      margin: 1in;
   }
}

@media handheld {
   body {
      font-family: Verdana, sans-serif;
      font-size: 100%;
      width: 90%;
      margin: 5%;
   }
}

The example above could be within a STYLE element or it could be in the .css file itself! And if putting it in the STYLE element you can mix and match:

CSS Media Types

CSS 2 and higher defines the following media types according to the W3C's CSS 2 definition:

all: Suitable for all devices.
aural: Intended for speech synthesizers. See the section on aural style sheets for details.
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 paged, opaque material and for documents viewed on screen in print preview mode. Please consult the section on paged media for information about formatting issues that are specific to paged media.
projection: Intended for projected presentations, for example projectors or print to transparencies. Please consult the section on paged media for information about formatting issues that are specific to paged media.
screen: Intended primarily for color computer screens.
tty: Intended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities. Authors should not use pixel units with the "tty" media type.
tv: Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

Naming Separate Media Stylesheets

Regardless of whether you use LINK or @import to specify your media-specific CSS, you can follow a system to name your .css files. I always name my .css files according to the media type being used, e.g.

all.css
screen.css
print.css
handheld.css
etc.

Of course you can name yours whatever you want, but this simple tip will help you keep the files straight, and can be applied to all Web sites you ever create.

References & Further Reading

return to top