CSS Media Types

The type of device used to display a webpage such as a computer screen is called Media. As designing your web site becomes more than just a browser game,but with more and more non traditional devices such as a handheld, a cell phone or even your watch wanting to access the web.

CSS Media Types

You want your webpage to look across multiple devices. The process is no where as daunting as it appear, with CSS level 2's support for media types being among the simple tools you can use to help make your site view-friendly across mediums

3 ways of specifying CSS Media types

There are three ways to attach a media type to the style sheet, so our CSS is applied only when a particular media (ie: handheld) is used to view the page:

1) Linked style sheets:

CSS Code

With the above declaration, "print.css" will only be applied to the page as it's printed (or viewed in Print Preview mode in your browser). You can add additional linked style sheets targeting other media types also. As a side note, for XML documents, the equivalent of the above will be:

The state's name is the "pseudo class" that defines how the HTML elements should appear, depending on which state it is in. Below is an example of changing the "link", "visited", and "hover" state. Note the order that are defined, as it is the proper ordering to make a functioning CSS link.

XML Equivalent Code

<?xml-stylesheet type="text/css" media="print" href="print.css" ?>

2) Imported style sheets:

CSS Code

Imported style sheets used here has the advantage as it being conditionally downloaded, meaning the style sheet will only be downloaded if the devise matches that specified in the media attribute. In low bandwidth devices such as handheld, any savings in unnecessary bandwidth could significant. The disadvantage of this technique at present is the lack of browser/device support relative to technique 1) above. .

3) Inline style sheets, through the @media rule:

CSS Code

You can see, whatever CSS declarations you wish be applied in case of "Projection" should be wrapped around in the @media block.

The @media Rule

Below sample example of the @media Rule

CSS Code

<html>
<head>
<style>
@media screen
{
p.test {font-family:verdana,sans-serif; font-size:14px}
}

@media print
{
p.test {font-family:times,serif; font-size:10px}
}

@media screen,print
{
p.test {font-weight:bold}
}
</style>
</head>
<body>
....
</body>
</html>

The following 10 media types are supported:

Pseudo-class	Purpose
all	Suitable/intended for all devises (default).
aural	Intended for speech synthesizers.
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 printed documents (applies to docs viewed in print preview mode too).
projection	Intended for projected presentations (ie: projectors or print to transparencies).
screen	Intended for computer screens.
tty	Intended for media using a fixed-pitch character grid (ie: teletypes or terminals).
tv	Intended for television-type devices.