HTML <style> media attribute
 HTML <style> tag
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>
|
Try it yourself!
|
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
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 |
Print preview mode/printed pages |
| braille |
Braille feedback devices |
| aural |
Speech synthesizers |
| all |
Suitable for all devices |
HTML <style> tag
|
|
|
