HTML style media attribute


Two different styles for two different media types (computer screen and print):
<style type="text/css">
h1 {color:#FF0000;}
p {color:#0000FF;}
body {background-color:#FFEFD6;}
<style type="text/css" media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
<h1>Header 1</h1>
<p>A paragraph.</p>

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.


<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 Print preview mode/printed pages
braille Braille feedback devices
aural Speech synthesizers
all Suitable for all devices
HTML style media attribute Reviewed by 1000sourcecodes on 02:46 Rating: 5
Powered by Blogger.