Media print CSS
Some CSS properties are designed for a specific type of media. For example the "voice-family" property is designed for aural user agents.
Some other 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.
The @media Rule
The @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:
Example
@media screen {p {
font-family: verdana, sans-serif;
}
}
@media print {
p {
font-family: georgia, serif;
color: blue;
}
}
Try it yourself »
Other Media Types
| Media Type | Description |
|---|---|
| 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 |
You might also like
