Westciv Logo

These materials are copyright Western Civilisation Pty Ltd.

www.westciv.com

They are brought to you courtesy of Style Master CSS Editor and Westciv's standards based web development courses.

Please see our website for detailed copyright information or contact us [email protected].

complete css guide

Media

An important assumption underlying CSS1 was that web pages were viewed using a personal computer with a monitor. But there are many more ways to access a web page than simply via computer and monitor. And each of these different media have their own characteristics. They may be monochrome, limited in size, they may be "aural" and read web page content aloud. They may be television based, like WebTV. And looking toward the future, we really have no idea what they will be like.

CSS2 provides a way to tailor a style sheet to the particular medium that is being used to display a page. Inside the same style sheet you can have different parts for printing, handheld devices, monitors and so on. Additionally, different style sheets can be imported depending on the medium used for browsing.

In this section we will take a look at how these work.

The @media rule

Browser support

Get browser support information for @media rules in the downloadable version of this guide or our browser support tables.

The @media rule is a subset of a style sheet specific to a particular type of medium, or group of media.

An @media rule specifies the medium or media to which it applies, then contains a number of statements, exactly like the statements we usually find in a style sheet. These statements apply only when a web page associated with this style sheet is being displayed using one of the media to which the @media rule applies.

@media rules are straightforward to construct. They comprise

These statements are identical to the statements we have seen in previous sections.

For example, the following rule applies a white background and black text color to the body of page when it is being printed or when it is being displayed on a handheld device.

@media print, handheld {

background: white;

color: black

}

Types of media

CSS2 provides for the following media types, as described in the recommendation

Media specific importing using @import

Browser support

Get browser support information for media specific importing using @import in the downloadable version of this guide or our browser support tables.

In addition to the media rule, CSS2 allows conditional importing of style sheets based on the current medium. This means that a style sheet will only be imported when a page is being displayed in a particular medium. This is particularly useful for low bandwidth media, like handhelds, which generally are wireless based. With an imported style sheet based on the medium, only the statements specific to the particular medium need to be downloaded.

To conditionally import a style sheet based on the current medium, create a standard @import rule, but add the names of the media that will cause the style sheet to be imported directly after the rule in a comma separated list.

For instance, to import a style sheet called monochrome.css when a page is to be printed or displayed on a handheld device you would create the following @import rule.

@import url(monochrome.css) print, handheld

For more on @import rules, see the section of on types of rules in CSS.

Hints and suggestions

Media specific importing essentially achieves the same outcome as using the @media rule described above. The difference is that if you use the @import rule the user agent does not even have to download the imported style sheet unless it is relevant. This will be a very powerful technique for designing for technologies such as handheld and mobile devices. It will be very important for these devices to support the @import rule.