HTML and CSS Reference
In-Depth Information
figure 8-36
Media groups
Device
continuous/paged
visual/audio/tactile
grid/bitmap
interactive/static
braille
continuous
tactile
grid
both
embossed
paged
tactile
grid
both
handheld
both
visual
both
both
print
paged
visual
bitmap
static
projection
paged
visual
bitmap
static
screen
continuous
visual
bitmap
both
speech
continuous
audio
N/A
both
tty
continuous
visual
grid
both
tv
both
visual, audio
bitmap
both
Media groups help identify which CSS styles are appropriate for different devices. For
example, the
font-size
property belongs to the visual media group because it describes
the visual appearance of the document content; and as indicated in Figure 8-36, this
means you can use the
font-size
property with handheld, print, projection, screen, TTY,
and TV devices. However, it would have no meaning to—and would in fact be ignored
by—devices whose output consists of Braille or audio output. On the other hand, the
pitch
property, which is used to define the pitch or frequency of a speaking voice, belongs
to the audio media group and is supported by speech and TV devices. By studying the
media groups, you can identify the properties that apply to different media devices.
Creating Styles for Different Devices
• To create a style sheet for a specific media device, add the attribute
media = “
devices
”
to either the
link
element or the
style
element, where
devices
is one or more of
braille
,
embossed
,
handheld
,
print
,
projection
,
screen
,
speech
,
tty
,
tv
, or
all
. If you don't specify a media device, the style sheet applies to all devices. Multiple
media types should be entered in a comma-separated list.
• To create a style for specific media from within a style sheet, add the rule
@media
devices
{
styles
}
where
styles
is the style rules that are applied to the different page elements dis-
played by those media devices.
Now that you've seen how to define the style sheet for a particular media device, you
decide to create one for printed output.
To create a style sheet for print media:
◗
1.
Use your text editor to open the
printtxt.css
style sheet from the tutorial.08\
tutorial folder included with your Data Files. Enter
your name
and
the date
in the
comment section of the file.
◗
2.
Save the file as
print.css
in the same folder.
