CSS media types
What if you want to display the content of a webpage differently depending on the media used? For example, if you wanted the content of a webpage to appear one way on a computer screen, but in a different way if it is printed out? With CSS "media types" you can specify a different appearance for webpages depending on where they are displayed.
This tutorial focuses on:
- Different media types
- The @media rule
Different media types
You can display web content on a variety of media. Each media type has a keyword associated with it that you should use to specify how content should appear on that media.
|All||all||Specifies a general appearance for all media|
|Computer screens||screen||Specifies an appearance for computer screens|
|Printers||Specifies how content will appear on print preview and when it is printed|
|Handheld devices||handheld||Specifies how content will appear on handheld devices|
The @media rule
You can use the @media rule in stylesheets to specify how content should appear on different media. To specify style rules for different media, use the @media rule followed by the keyword signifying the type of media you want to set style rules for, folowed by an opening curly brace, the style rules, and a closing curly brace.
In the above example, text is specified to be 16 pixels in size when it is viewed on the screen, and 12 pixels in size when it is printed.