HTML style media attribute

Example Two different styles for two different media types (computer screen and print): <html> <head> <style type=&...


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

Best Online Tutorials | Source codes | Programming Languages: HTML style media attribute
HTML style media attribute
Best Online Tutorials | Source codes | Programming Languages
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content