Introduction
CSS provides different Media Types for
different purposes. By the use of the Media types, different layouts are used
for specific devices. As one layout for handheld devices , one for print and one
for screen.
Media types
CSS provide various properties for different
media types. Some CSS properties are designed for certain specific Media Types
and some properties are designed for different Media Types. For Example ,
"voice-family" property can not be used for different Media Types. It is only
used for aural user agents. But the properties like "font-size" can be used for
two media Screen and Print. Values of the property may also Different. Most of
the time the documents need a much larger font on screen than to paper. This all
different because of the need and requirement. As sans-serif font are easier to
read on the screen but serif font are easy to be read on the printed page.
Rule @media
@media rule allow us to use different
style rule for different media with in single style sheet.
The media type names are not case-sensitive.
Example
<html>
<head>
<style>
@media
screen,print
{
p.test {font-weight:bold;}
}
@media
print
{
p.test {font-family:times,serif;font-size:10px;}
}
@media
screen
{
p.test {font-family:verdana,sans-serif;font-size:14px;}
}
</style>
</head>
<body>
</body>
</html>
Here in style tag we define 3
@media rules
-
@media screen, print
-
@media print
-
@media screen
If you see the code on the
screen the font family will be verdana, sans-serif , font-size will be 14px and
the font weight will be bold. and if you print the same page then the font
family will be times, serif and the font size will be 10px but the font weight
will be bold.