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.

Media type	Keyword	Description
All	all	Specifies a general appearance for all media
Computer screens	screen	Specifies an appearance for computer screens
Printers	print	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: 16px;} } @media print{ body {font-size: 12px;} } </style> </head> <body> <p>Some text</p> </body> </html>

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.