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 lesson 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.
| Media type | Keyword | Description |
|---|---|---|
| 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.
Syntax:
@media typeOfMedia{
style rules
}
Example:
<html>
<head>
<title>Media types</title>
<style type="text/css">
<!--
@media screen{
body {font-size: 14pt;}
}
@media print{
body {font-size: 12pt;}
}
-->
</style>
</head>
<body>
Some text
</body>
</html>
In the above example, text on a webpage is specified to be 14 points in size when it is viewed on the screen, and 12 points in size when it is printed.
