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 (www.opera.com) supports a number of types beyond what more popular browsers
support.
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"
type="text/css">
<link rel="stylesheet" href="smallscreen.css" media="handheld"
type="text/css">
<link rel="stylesheet" href="print.css" media="print"
type="text/css">
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"
type="text/css">
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>
<style type="text/css" media="print">
/* print rules */
</style>
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
fragment:
@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 */ }
</style>
