Remember the first time you printed out a Web page? It was disappointing. What's optimized for the screen can look crappy on paper. With CSS2, you can actually have a different set of stylesheet rules depending on the media. That is, you could have one style for your page on-screen and a different style for your page when printed. This is done with @media.
@media screen {
BODY { background: black; color: white }
P { font-family: verdana, sans-serif }
}
@media print {
BODY { background: white; color: black }
P { font-family: times, serif }
}
The above code tells the browser to display white Verdana text on a black background on-screen. But if the page is printed, it will be in black Times text on a white background. Each page is easily optimized for its output method.
For proof using a different example, print this page using IE 5. You'll see that on-screen, this paragraph is in Verdana, but when printed, it's in Times.
Media types aren't restricted to screen and print, either. In the future, we might also be able to use:
- handheld — for handheld devices like PalmPilots
- projection — for projectors or printing to transparencies
- tv — for television
- tty — for teletypes or terminals that use fixed-pitch character grids
- aural — for speech synthesizers
- braille — for braille tactile feedback devices
- embossed — for paged braille printers
- all — for all devices
Now let's look at other miscellaneous stuff that CSS2 has to offer.
next page»
