HTML Reference Manual

HTML Tag Reference

HTML style media attribute

The media attribute specifies which media the CSS style is targeted at/Devices have been optimized, this attribute is used to specify styles for special devices (such as iPhone), voice, or print media.

　HTML <style> tag

Online Example

Specify styles for printing:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML source media attribute usage-Basic Tutorial(oldtoolbag.com)</title>
<style media="print">
h1　{color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>
</head>
<body>
<h1>oldtoolbag.com Example</h1>
<p>If you print this page, or open it in print preview, you will see that it uses the media=“print” stylesheet for styling. The “print” stylesheet contains black text on a white background.</p>
</body>
</html>

Test to see ‹/›

Browser compatibility

IEFirefoxOperaChromeSafari

All major browsers support the media attribute.

Definition and usage

The media attribute specifies which media the CSS style is targeted at/optimized for the device.
This attribute is used to specify styles for special devices (such as iPhone), voice, or print media.
Tip: This attribute can accept multiple values.

HTML 4.01 with HTML5The differences

None.

Syntax

<style media="value">

Possible operators

Value	Description
and	Specify the AND operator.
not	Specify the NOT operator.
,	Specify the OR operator.

device

Value	Description
all	Default. Adapts to all devices.
aural	Speech synthesizer.
braille	Braille feedback devices for the blind.
handheld	Handheld devices (small screen, limited bandwidth).
projection	Projector.
print	Print preview mode / Printed page.
screen	Computer screen (default value).
tty	Teletype and similar media using a monospaced character grid.
tv	Television type devices (low resolution, limited screen scrolling capability).

Value

Value	Description
width	Specify the width of the target display area You can use "min-" and "max-" prefix. Example: media="screen and (min-width:500px)"
height	Specify the height of the target display area You can use "min-" and "max-" prefix. Example: media="screen and (max-height:700px)"
device-width	Specify the target display/The width of the paper. You can use "min-" and "max-" prefix. Example: media="screen and (device-width:500px)"
device-height	Specify the target display/The height of the paper. You can use "min-" and "max-" prefix. Example: media="screen and (device-height:500px)"
orientation	Specify the target display/The direction of the paper. Possible values: "portrait" or "landscape" Example: media="all and (orientation: landscape)"
aspect-ratio	Specify the width of the target display area/height ratio You can use "min-" and "max-" prefix. Example: media="screen and (aspect-ratio:16/9)"
device-aspect-ratio	Specify the target display/the device of the paper-width/device-height ratio You can use "min-" and "max-" prefix. Example: media="screen and (aspect-ratio:16/9)"
color	Specify the bits of the target display/color You can use "min-" and "max-" prefix. Example: media="screen and (color:3)"
color-index	Specify the number of colors the target display can handle. You can use "min-" and "max-" prefix. Example: media="screen and (min-color-index:256)"
monochrome	Specify the bits in the monochrome frame buffer/pixel. You can use "min-" and "max-" prefix. Example: media="screen and (monochrome:2)"
resolution	Specify the target display/paper pixel density (dpi or dpcm). You can use "min-" and "max-" prefix. Example: media="print and (resolution:300dpi)"
scan	Specify the scanning method of the TV display. Possible values: "progressive" and "interlace". Example: media="tv and (scan:interlace)"
grid	Specify whether the output device is a grid or bitmap. Possible values:"1" is grid, otherwise is "0". Example: media="handheld and (grid:1)"

　HTML <style> tag

HTML: <template> tag