CSS Media Types
Media Types allow you to specify how documents will be
presented in different media. The document can be displayed differently on the
screen, on the paper, with an aural browser, etc.
The @media Rule
The @media rule allows different style rules for different media in the same style sheet.
<html>
<head>
<style>
@media screen
{
p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
p.test {font-weight:bold;}
}
</style>
</head>
<body>
....
</body>
</html>
<head>
<style>
@media screen
{
p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
p.test {font-weight:bold;}
}
</style>
</head>
<body>
....
</body>
</html>
Different Media Types
Note: The media type names are not case-sensitive.
Media Type
|
Description
|
all
|
Used for all media type devices
|
aural
|
Used for speech and sound synthesizers
|
braille
|
Used for braille tactile feedback devices
|
embossed
|
Used for paged braille printers
|
handheld
|
Used for small or handheld devices
|
print
|
Used for printers
|
projection
|
Used for projected presentations, like slides
|
screen
|
Used for computer screens
|
tty
|
Used for media using a fixed-pitch character grid, like
teletypes and terminals
|
tv
|
Used for television-type devices
|
No comments:
Post a Comment
Please write your view and suggestion....