HTML and CSS Reference
In-Depth Information
Table 16-1. Media Types
Applies the styles to all devices. This is the default if no media type is specified.
Specifies that the styles should be used by Braille tactile devices.
Applies the styles to paged Braille printers.
Intended for mobile devices, but not used by modern smartphones or tablets.
Applies the styles to pages when they're printed.
Indicates that the styles are for use with a projector.
Specifies that styles should be used by a browser on a computer screen. This is the most
common media type. Modern mobile devices also use these styles.
Intended for speech synthesizers for the visually impaired.
For teletypes, terminals, or portable devices with limited display capabilities.
Intended for televisions and similar devices.
The handheld media type was intended to be used for mobile phones and palmtop computers or
personal digital assistants (PDA), but very few devices ever supported it. if you use it, your styles are likely to be
ignored. you'll learn in Chapter 17 how to target styles at smartphones and tablets using media queries, which extend
the basic media types.
Most of the media types in Table 16-1 are highly specialized. The only ones you are likely to need in normal
circumstances are all , print , and screen .
Linking External Style Sheets
The most common way to specify the media type(s) you want to target is by adding the media attribute to the
<link> tag when attaching a style sheet to a web page. The attribute accepts a comma-separated list of media
types from Table 16-1 . For example, the following link specifies that the style sheet should be applied only to
browsers that display on computer screens and mobile devices:
<link href="styles/visual.css" rel="stylesheet" media="screen" >
To specify different rules for printing, attach a separate style sheet like this:
<link href="styles/print.css" rel="stylesheet" media="print" >
Specifying the media types like this makes the style sheets mutually exclusive. Printers ignore the first style
sheet, while visual browsers ignore the second one. To specify that the styles should be used by both screen
browsers and printer, add both media types separated by a comma like this:
<link href="styles/common.css" rel="stylesheet" media="screen, print" >
Search WWH ::

Custom Search