W3Schools.com

HTML <style> media Attribute

HTML style Tag Reference HTML <style> tag

Example

Two different styles for two different media types (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 »

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The media attribute is supported in all major browsers.

Definition and Usage

The media attribute specifies what media/device the CSS style is optimized for.

This attribute is used to specify that the style is for special devices (like iPhone), speech or print media.

Tip: To define more than one media type per style element, use a comma-separated list (example: <style type="text/css" media="screen,projection">).

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 Print preview mode/printed pages
braille Braille feedback devices
aural Speech synthesizers
all Suitable for all devices

HTML style Tag Reference HTML <style> tag
WEB HOSTING
Best Web Hosting
PHP MySQL Hosting
Best Hosting Coupons
UK Reseller Hosting
Cloud Hosting
Top Web Hosting
$3.98 Unlimited Hosting
Premium Website Design
WEB BUILDING
XML Editor - Free Trial!
FREE Website BUILDER
Best Website Templates Top CSS Templates
CREATE HTML Websites
EASY WEBSITE BUILDER
W3SCHOOLS EXAMS
Get Certified in:
HTML, CSS, JavaScript, XML, PHP, and ASP
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
STATISTICS
Browser Statistics
Browser OS
Browser Display
SHARE THIS PAGE