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.

Deprecated Media Types

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.

How to add a Media Type

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;