CSS Media Types

SEARCH TUTORIALS:

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.

A D V E R T I S E M E N T

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. .