CSS Media Types

Full list of CSS media types. CSS media types are used in media queries, which allow you to apply different styles depending on the output device.

You can use the CSS @media at-rule to create media queries that test for certain media types, then apply styles accordingly.

For example, you can specify one set of styles for when your web page is viewed on a computer screen and another for when it's printed out.

List of CSS Media Types

Below is a list of media types supported in CSS Media Queries Level 4.

all: Matches all devices.
print: Matches printers, and devices intended to reproduce a printed display, such as a web browser showing a document in "Print Preview".
screen: Matches all devices that aren't matched by print or speech.
speech: Matches screenreaders and other devices that read out the content of a page.

In addition to the above media types, CSS2 supported the following media types, which are being deprecated in CSS Media Queries Level 4.

tty: Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities).
tv: Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).
projection: Intended for projected presentations, for example projectors.
handheld: Intended for handheld devices (typically small screen, limited bandwidth).
braille: Intended for braille tactile feedback devices.
embossed: Intended for paged braille printers.
aural: Intended for the aural rendering of a document. This was introduced in CSS2 but deprecated in CSS2.1 (in favor of the "speech" media type).

Media types can be combined with media features in order to provide more granularity in your media queries.

Here are three methods for creating separate styles depending on the media type:

Use the CSS @media at-rule. For example:

@media print { p { font-family: georgia, times, serif; } }
Use the media attribute when using the link tag to link to an external style sheet. For example:

<link rel="stylesheet" media="screen" href="/css/screen_version.css">
Add the media type when using the @import at-rule. For example:

@import "screenstyles.css" screen;