With media types a page can have one layout for screen, one for print, one for handheld devices, etc.
Some CSS properties are only designed for a certain media. For example the "voice-family" property is designed for aural user agents. Some other 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.
The @media rule allows different style rules for different media in the same style sheet.
The style in the example below tells the browser to display a 14 pixels Verdana font on the screen. But if the page is printed, it will be in a 10 pixels Times font. Notice that the font-weight is set to bold, both on screen and on paper:
See it yourself ! Print this page (or open Print Preview), and you will see that the paragraph under "Media Types" will be displayed in another font, and have a smaller font size than the rest of the text.
Note: The media type names are not case-sensitive.
|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|
Your message has been sent to W3Schools.