Introduction
CSS provides different Media Types for
different purposes. Through the use of Media types, different layouts are used
for specific devices. As one layout for handheld devices, one for print and one
for the screen.
Media types
CSS provides 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 is easier to
read on the screen but serif font is easy to be read on the printed page.
Rule @media
@media rule allows 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 a 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
the family will be times, serif and the font size will be 10px but the font-weight
will be bold.