Cascading style sheets have a feature that allows us to specify the way of future document presentation, or in other words to choose what media is going to be rendering our web page. This feature is extremely popular with designing of mobile websites as well as designing of printed canvases.

Many CSS properties, such as font related ones, may be shared between different media but due differences in resolution, texture, screen, etc sometimes there is a need of applying different settings on the same properties. On the other hand CSS predicts some completely individualized properties as well; one of them would be the property page-break-before that applies only on paged media. These reasons explain why this feature of the style sheets is very handy and important.

CSS recognizes following media types:

  • all; suitable for all devices;
  • braille; braille tactile devices;
  • embossed; paged braille printers;
  • handheld; handheld devices (usually smaller screens, limited bandwidth...);
  • print; paged printing material and documents viewed in 'print preview mode';
  • projection; paged projected (i.e., projectors...) material;
  • screen; computer screens;
  • speech; speech synthesizers (previously called aural);
  • tty; fixed-pitch character grids (i.e., teletypes, terminals...); suggestion is not to use pixels as units with this type;
  • tv; television type devices (limited scrolling ability, lower resolution...).

Two types cannot be rendered at the same time if applied on a single canvas (let say screen) but if applied on different canvases, let say a screen and handheld, then they will be able to be rendered simultaneously.

Considering that some properties may be applied to more then one media type, the media being used can be split into a few different groups that better explain relation amongst CSS properties and media types. These are:

  • continuous or paged;
  • visual, audio, speech or tactile;
  • grid or bitmap;
  • interactive or static;
  • all.

The following table shows the relationship between media types and media groups:

Relationship between media groups and media types
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

 

 

 

 

 

 

 

 

Example

CSS media types example:

 

›› go to examples ››