Harvard Extension School
CSCI E-12 Fundamentals of Web Site Development | Spring 2020

## media selector

CSS2 defines a media selector for different media types.

### link

Incorporate as part of the "link" element:

    <link rel="stylesheet" type="text/css" media="all" href="screen.css" />
    <link rel="stylesheet" type="text/css" media="print" href="print.css" />

### @media selector

Or, use "@media" selector in style rule:

    @media print {
      body { font-size: 11pt; }
    }
    @media screen {
      body { font-size: medium; }
    }
    @media print {
      div.navigation {
        display: none;
      }
      hr {
        page-break-after: always;
      }
    }

### media types

all
  Suitable for all devices.
braille
  Intended for braille tactile feedback devices.
embossed
  Intended for paged braille printers.
handheld
  Intended for handheld devices (typically small screen, limited bandwidth).
print
  Intended for paged material and for documents viewed on screen in print preview mode.
projection
  Intended for projected presentations, for example projectors.
screen
  Intended primarily for color computer screens.
speech
  Intended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for this purpose.
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).

Copyright © David Heitmeyer