Some CSS properties are designed for a specific type of media. For example the
voice-family property is designed for aural user agents.
CSS properties can be used for different media types. For example, the
font-size property can be used for both screen and print media, but
perhaps with different values. A document usually needs a larger font-size on a
screen than on paper, and sans-serif fonts are easier to read on the screen, while
serif fonts are easier to read on paper.
@media rule makes it possible to define different style rules for different media types
in the same stylesheet.
The CSS in the example below tells the browser to display a 17 pixels Verdana font on the screen. But if the page is printed, it will be in a blue 14 pixels Georgia font:
|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|
|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|