Making the Most of Media

CSS has an attribute called media which allows separate styling for different media types. There are a total of ten media types, three of which are the most often - screen, handheld and print. Information about the different media types can be found on the W3C website.

These can be used within the stylesheet itself, as shown in the following example:

@media screen {
  body {}
}
@media handheld {
  body {}
}

However, a more common use is using the link element which is used within the head.

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

The master.css stylesheet will be applied to all media types. More importantly, the second declaration achieves multiple tasks. The screen.css stylesheet is applied (along with master.css) to both the screen and projection media types.

The web browser Opera uses the projection media type when browsing in full-screen mode. If no stylesheet for this media type is defined, then the user will encounter an unstyled webpage.

Also, using multiple media types in one declaration, like with the screen and projection example, hides the stylesheet from older version four browsers. This is useful as these browsers will apply master.css, and therefore the basic branding typography and colouring. However, the more complex layout declarations, within the screen.css stylesheet, will not be applied.