HTML style media properties
Examples
For two different types of media (print and screen) of two different style sheets:
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
try it"
Browser Support
All major browsers support media properties.
Definition and Usage
media attribute specifies the current resources for any medium / optimized.
This property is mostly used in predetermined different styles for different media types CSS stylesheet.
Tip: This attribute can accept multiple values.
Differences between HTML 4.01 and HTML5
no.
grammar
Possible operator
| value | description |
|---|---|
| and | Provisions AND operator. |
| not | Provision NOT operator. |
| , | Provision OR operator. |
equipment
| value | description |
|---|---|
| all | default. Adapt to all devices. |
| aural | Speech synthesizer. |
| braille | Blind with Braille feedback devices. |
| handheld | Handheld devices (small screen, limited bandwidth). |
| projection | projector. |
| 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 roll capability). |
value
| value | description |
|---|---|
| width | Predetermined target display width of the area. You can use "min-" and "max-" prefixes. Examples: media = "screen and (min-width: 500px)" |
| height | Predetermined target height of the display area. You can use "min-" and "max-" prefixes. Examples: media = "screen and (max-height: 700px)" |
| device-width | Provisions of the target display / paper width. You can use "min-" and "max-" prefixes. Examples: media = "screen and (device-width: 500px)" |
| device-height | Provisions of the target display / paper height. You can use "min-" and "max-" prefixes. Examples: media = "screen and (device-height: 500px)" |
| orientation | Provisions of the target display / paper direction. Possible values: "portrait" or "landscape" Examples: media = "all and (orientation: landscape)" |
| aspect-ratio | Predetermined target display width / height ratio of the area You can use "min-" and "max-" prefixes. Examples: media = "screen and (aspect-ratio: 16/9)" |
| device-aspect-ratio | Provisions of the target display / paper device-width / device-height ratio You can use "min-" and "max-" prefixes. Examples: media = "screen and (aspect-ratio: 16/9)" |
| color | bits specified target display / color You can use "min-" and "max-" prefixes. Examples: media = "screen and (color: 3)" |
| color-index | A predetermined number of color target display can handle. You can use "min-" and "max-" prefixes. Examples: media = "screen and (min-color-index: 256)" |
| monochrome | Provisions monochrome frame buffer in bits / pixel. You can use "min-" and "max-" prefixes. Examples: media = "screen and (monochrome: 2)" |
| resolution | Provisions of the pixel density of the target display / paper (dpi or dpcm). You can use "min-" and "max-" prefixes. Examples: media = "print and (resolution: 300dpi)" |
| scan | Predetermined scanning tv display. Possible values: "progressive" and "interlace". Examples: media = "tv and (scan: interlace)" |
| grid | Predetermined output device is a grid or bitmap. Possible values: "1" for the grid, otherwise "0." Examples: media = "handheld and (grid: 1)" |
HTML <style> tag