CSS Media Types

Media Types

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;
        font-size: 17px;
    }
}

@media print {
    p {
        font-family: georgia, serif;
        font-size: 14px;
        color: blue;
    }
}

---

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
print	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