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 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 — usually small screen devices such as mobile phones or PDAs.
print	Used for printers.
projection	Used for projected presentations, for example projectors.
screen	Used primarily for color computer screens.
tty	Used for media using a fixed-pitch character grid — such as teletypes, terminals, or portable devices with limited display capabilities.
tv	Used 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 Types	Media Groups
	continuous/paged	visual/audio/speech/tactile	grid/bitmap	interactive/static
braille	continuous	tactile	grid	both
embossed	paged	tactile	grid	static
handheld	both	visual, audio, speech	both	both
print	paged	visual	bitmap	static
projection	paged	visual	bitmap	interactive
screen	continuous	visual, audio	bitmap	both
speech	continuous	speech	N/A	both
tty	continuous	visual	grid	both
tv	both	visual, audio	bitmap	both

return