CSS Media types

CSS media types can be used to apply part of a style sheet based on the result of one or more media queries.

@media print {
    body { font-size: 15pt }
  @media screen {
    body { font-size: 12px }
  @media screen, print {
    body { line-height: 1.3 }

CSS Different Media Types

The following table lists the various media types that may used to target different types of devices such as printers, handheld devices, computer screens etc.

Media TypeDescription
allUsed for all media type devices.
auralUsed for speech and sound synthesizers.
brailleUsed for braille tactile feedback devices.
embossedUsed for paged braille printers.
handheldUsed for small or handheld devices — usually small screen devices such as mobile phones or PDAs.
printUsed for printers.
projectionUsed for projected presentations, for example projectors.
screenUsed primarily for color computer screens.
ttyUsed for media using a fixed-pitch character grid — such as teletypes, terminals, or portable devices with limited display capabilities.
tvUsed for television-type devices — low resolution, color, limited-scrollability screens, sound available.
@media screen and (min-width: 500px) {
  body {
    background-color: skyblue;

CSS Media types and groups

See the relation between media types and groups below:

Media TypesMedia Groups
handheldbothvisual, audio, speechbothboth
screencontinuousvisual, audiobitmapboth
tvbothvisual, audiobitmapboth


Comments are closed.