1. CSS intro
  2. CSS stylesheets
  3. CSS syntax
  4. CSS Classes & ID's
  5. CSS comments
  6. CSS BG properties
  7. CSS text properties
  8. CSS font properties
  9. CSS list properties
  10. CSS border properties
  11. CSS margin properties
  12. CSS padding properties
  13. CSS outline properties
  14. CSS table properties
  15. CSS dim properties
  16. CSS class properties
  17. CSS position properties
  18. CSS pseudo classes
  19. CSS pseudo elements
  20. CSS shortcuts
  21. CSS media types
  22. CSS summary

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

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.

@media typeOfMedia{ style rules }
<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.

© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information