CSS2 - Media types

CSS2 media types allow you to conditionally import a CSS style sheet based on the 'type' of device you are working with.


An example for 'print'

If you have ever seen the content and layout of a web page change after you hit Print and look at the print preview, then you have seen the print media type in action.

<head>
  <link rel="stylesheet" type="text/css" href="default.css">
  <link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>

There are 10 CSS2 (CSS2.1) media types. ref.
You will see print used frequently. The others not so much.


Media Type Description
allFor all devices.
brailleFor braille tactile feedback devices.
embossedFor paged braille printers.
handheldFor handheld devices (typically small screen, limited bandwidth).
printFor printed material and for documents viewed on screen in print preview mode.
projectionFor projectors.
screenFor computer screens.
speechFor speech synthesizers.
ttyFor teletype. For devices employing fixed-pitch character output.
tvFor television (low resolution, has color, has sound, limited user input capabilities).

Ads by Google

Ask a question, send a comment, or report a problem - click here to contact me.

© Richard McGrath