CSS Media Types

---

Media types allow you to specify how a document will be presented on different media. The document can be displayed in different ways on screen, on paper, or in aural browsers, etc.

---

Media Types

Some CSS properties are only designed for certain media. For examplevoice-familyThe property is designed specifically for aural user agents. Other properties can be used for different media types. For example,font-sizeThe property can be used for screen and print media, but with different values. Documents on screen and on paper differ, usually requiring a larger font,sans-serifFonts are more suitable for reading on screen, whileseriffonts are easier to read on paper.

---

@media rule

The @media rule allows setting different styles for different media in the same style sheet.

The following example tells the browser to display a 14-pixel Verdana font style on screen. But if the page is printed, it will be a 10-pixel Times font. Note that font-weight is set to bold both on screen and on paper:

You can try it yourself!If you are usingMozilla / FirefoxOr print this page with IE5+, and you will see that the media type displays using a font slightly smaller than the other text.

---

Other media types

Note:Media type names are case-insensitive.

Media Types	Description
all	Used for all media devices.
aural	Used for speech and audio synthesizers.
braille	Used for Braille tactile feedback devices for the blind.
embossed	Used for paged Braille printers for the blind.
handheld	Used for small handheld devices.
print	Used for printers.
projection	Used for presentations, such as slides.
screen	Used for computer monitors.
tty	Used for media with a fixed-density character grid, such as teletypewriters and terminals.
tv	Used for television-type devices.

other extensions