Advanced CSS

Stylesheets for Specific Media

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

laptop

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

iphone

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

printed

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.

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

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

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

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:

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

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:

<style type="text/css">
   @import url("screenable.css") screen;
   @import url("holdable.css") handheld;   
   @import url("printable.css") print;   
</style>

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:

<style type="text/css">
   @import url("all.css) all;
   
   @media print {
      body {
         font-family: Times New Roman, serif;
         font-size: 11pt;
         width: 7.5in;
         margin: 1in;
      }
   }
</style>

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.

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