HTML and CSS Reference
In-Depth Information
T IP If you are curious to experiment with other media type values beyond screen and print , the
Opera browser ( supports a number of types beyond what more popular browsers
CSS provides two main ways to define media types for style sheets. The first method
simply uses the media attribute for the <link> tag to define the media type. This attribute
enables the page designer to define one style for computer screens, one for print, and
perhaps one for handheld devices or other supported media types. For example, here we
associate three different style sheets that vary by media:
<link rel="stylesheet" href="screen.css" media="screen"
<link rel="stylesheet" href="smallscreen.css" media="handheld"
<link rel="stylesheet" href="print.css" media="print"
Multiple values also can be set for the attribute. These should be separated by commas,
to show that the style can apply to many media forms; for example:
<link rel="stylesheet" href="screen.css" media="screen, projection, tv"
The default value for media is all and is applied if the attribute is not used.
When using an embedded style sheet, the media attribute is used in a similar way:
<style type="text/css" media="screen, projection, tv">
/* screen rules */
<style type="text/css" media="print">
/* print rules */
When styles are imported, the @import rule can also be used with a media type by
adding the appropriate media type after defining the URL, as shown in this code
@import url("screen.css") screen;
@import url("print.css") print;
A @media rule is used to define style rules for multiple media types in a single
embedded style sheet:
<style type="text/css">
@media screen { /* screen rules */ }
@media print { /* print rules */ }
@media screen, print { /* screen and print rules */ }
Search WWH ::

Custom Search