HTML <style> mediaAttribute
Examples
Two different stylesheets for two different media types (screen and print):
Try it Yourself »
Browser Support
All major browsers support the media attribute.
Definition and Usage
The media attribute specifies for which media/device the current resource is optimized.
This attribute is mostly used in CSS stylesheets to specify different styles for different media types.
Tip:This attribute can accept multiple values.
Differences Between HTML 4.01 and HTML5
None.
Syntax
Possible Operators
| Value | Description |
|---|---|
| and | Specifies the AND operator. |
| not | Specifies the NOT operator. |
| , | Specifies the OR operator. |
Devices
| Value | Description |
|---|---|
| all | Default. Applies to all devices. |
| aural | Speech synthesizers. |
| braille | Braille feedback devices for the blind. |
| handheld | Handheld devices (small screens, limited bandwidth). |
| projection | Projectors. |
| Print preview mode / printed pages. | |
| screen | Computer screen (default). |
| tty | Teletypewriters and similar media using a fixed-width character grid. |
| tv | TV-type devices (low resolution, limited screen scrolling capability). |
Value
| Value | Description |
|---|---|
| width |
Specifies the width of the target display area. The "min-" and "max-" prefixes can be used. Example: media="screen and (min-width:500px)" |
| height |
Specifies the height of the target display area. The "min-" and "max-" prefixes can be used. Example: media="screen and (max-height:700px)" |
| device-width |
Specifies the width of the target display/paper. The "min-" and "max-" prefixes can be used. Example: media="screen and (device-width:500px)" |
| device-height |
Specifies the height of the target display/paper. The "min-" and "max-" prefixes can be used. Example: media="screen and (device-height:500px)" |
| orientation |
Specifies the orientation of the target display/paper. Possible values: "portrait" or "landscape" Example: media="all and (orientation: landscape)" |
| aspect-ratio |
Specifies the width/height ratio of the target display area. The "min-" and "max-" prefixes can be used. Example: media="screen and (aspect-ratio:16/9)" |
| device-aspect-ratio |
Specifies the device-width/device-height ratio of the target display/paper. The "min-" and "max-" prefixes can be used. Example: media="screen and (device-aspect-ratio:16/9)" |
| color |
Specifies the bits/color of the target display. The "min-" and "max-" prefixes can be used. Example: media="screen and (color:3)" |
| color-index |
Specifies the number of colors the target display can handle. The "min-" and "max-" prefixes can be used. Example: media="screen and (min-color-index:256)" |
| monochrome |
Specifies the bits/pixel in a monochrome frame buffer. The "min-" and "max-" prefixes can be used. Example: media="screen and (monochrome:2)" |
| resolution |
Specifies the pixel density (dpi or dpcm) of the target display/paper. The "min-" and "max-" prefixes can be used. Example: media="print and (resolution:300dpi)" |
| scan |
Specifies the scanning method of TV displays. Possible values: "progressive" and "interlace". Example: media="tv and (scan:interlace)" |
| grid |
Specifies whether the output device is a grid or a bitmap. Possible values: "1" for grid, otherwise "0". Example: media="handheld and (grid:1)" |
HTML <style> Tag Other Extensions