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 |
|---|---|
| all | For all devices. |
| braille | For braille tactile feedback devices. |
| embossed | For paged braille printers. |
| handheld | For handheld devices (typically small screen, limited bandwidth). |
| For printed material and for documents viewed on screen in print preview mode. | |
| projection | For projectors. |
| screen | For computer screens. |
| speech | For speech synthesizers. |
| tty | For teletype. For devices employing fixed-pitch character output. |
| tv | For television (low resolution, has color, has sound, limited user input capabilities). |