Example Two different styles for two different media types (computer screen and print): <html> <head> <style type=...
Example
Two different styles for two different media types (computer screen and print):<html> <head> <style type="text/css"> h1 {color:#FF0000;} p {color:#0000FF;} body {background-color:#FFEFD6;} </style> <style type="text/css" media="print"> h1 {color:#000000;} p {color:#000000;} body {background-color:#FFFFFF;} </style> </head> <body> <h1>Header 1</h1> <p>A paragraph.</p> </body> </html> |
Definition and Usage
The media attribute is used to specify different styles for different media types.Tip: To define more than one media type per style element, use a comma-separated list (example: <style type="text/css" media="screen,projection">).
Browser Support
The media attribute with the value of "screen", "print", and "all" is supported in all major browsers.Tip: Opera also supports the "handheld" value.
Syntax
<style media="value"> |
Attribute Values
| Value | Description |
|---|---|
| screen | Computer screens (this is default) |
| tty | Teletypes and similar media using a fixed-pitch character grid |
| tv | Television type devices (low resolution, limited scroll ability) |
| projection | Projectors |
| handheld | Handheld devices (small screen, limited bandwidth) |
| Print preview mode/printed pages | |
| braille | Braille feedback devices |
| aural | Speech synthesizers |
| all | Suitable for all devices |
