Media types

The @media property allows you have different style sheets for different media such as a screen or paper. Lets face it, people print web pages. And they don’t print out very well. For example, a document usually needs a larger font on a screen than on paper. You’ll also probably find the sans-serif fonts are easier to read on screen but serifs fonts are easier to read on paper.

To cope with this, have one style for your pages when you look at them on the screen and another for the page if you print it.

Here’s an example:

@media print  {body { font-size: 10pt }}
@media screen {body { font-size: 12pt }}

This example tells the browser to use a different font size for a screen and a printer.

You could have other media types:

all for all devices
aural for speech generators or similar audio device
braille and embossed for tactile devices and printers
handheld for palmtop computers. These devices usually have small screens and limited band width
projection for projectors, printing to transparencies or slide shows
tv for television. These are low resolution, colour, limited-scroll screens but with sound available
tty for teletypes or terminals that use fixed-width characters. Don’t use pixel lengths with these devices