Addressing Different Media
Introduction
Because of the ability to separate content and style with CSS the developer is able to provide different stylesheets to a range of media which have differing capabilities. This article discusses which medias can be addressed and how to apply styles to them.
The Including Style Sheets article discusses the main methods of including stylesheets. Please read this article before proceeding with this.
The Use CSS Media
The main media use for the web is a large colour screen, via a desktop or laptop computer. However, other mediums are used when interacting with web content, specifically printing, but recently using mobile devices which have very small screens in comparision to both print and screen with heavily reduced bandwidth capabilities.
Different Media Types
CSS is often used to present a website differently to different types of media. As of CSS2.1 there are a total of nine different media types. The three most commonly used media tyles are:
- screen
- - is used for colour computer screens.
- - is applied on print preview and when printing webpages.
- handheld
- - is for mobile devices such as mobile phones and PDAs.
The other media types are:
- aural
- braille
- embossed
- projection
- tty
- tv
There is the media type 'all' which can be used to apply stylesheets to all the different media types.
Applying the Different Media Types
Media types can be specified on external, internal and @import CSS inclusion methods.
Defining the External Link Media Type
<link rel="stylesheet" type="text/css" href="screen_style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print_style.css" media="print" />
Defining the Internal Media Type
<style type="text/css" media="print">Defining the @media Media Type
<style type="text/css">
@import url(path/to/print.css) print
@import url(path/to/handheld.css) handheld
</style>
You can do combinations of different media types by specifying them in a line separated with commas.
<link rel="stylesheet" type="text/css" href="style.css" media="screen,handheld" />
<link rel="stylesheet" type="text/css" href="print_style.css" media="print" />
Finally, if you have a default styling that you want to apply to all media types then the following should be used.
<link rel="stylesheet" type="text/css" href="style_for_all.css" media="all" />Further Reading & Resources
Below are resources I used for this article and would be interesting further reading on the subject.
- W3C: Media Types
-
One of the most important features of style sheets is that they specify how a document is to be presented on different media: on the screen, on paper, with a speech synthesizer, with a braille device, etc.