HTML sl;style sgt; media properties
The media property specifies that the set CSS style or external style file is applied to the target medium.
Two different style sheets for two different media types (screen and print):
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;} </style>
Try it out . . .
Browser support
Media properties are supported by all major browsers.
Definitions and usages
The media property specifies what media/devices the resource is currently optimized for.
This property is mostly used to specify different styles of CSS style sheets for different media types.
Tip: The property can accept multiple values. If you need to define more than one media type in a style element, use a comma to separate the media types you want to use, for example:
The difference between HTML 4.01 and HTML5
No.
Grammar
Possible operators
Value | Describe |
---|---|
and | Specify the AND operator. |
not | Specifies the NOT operator. |
, | Specifies the OR operator. |
Equipment
Value | Describe |
---|---|
all | Default. Adapt to all devices. |
aural | Speech synthesizer. |
braille | A point-and-dot feedback device for the blind. |
handheld | Handheld devices (small screen, limited bandwidth). |
projection | Projector. |
Print preview mode / print page. | |
screen | Computer screen (default). |
Tty | A typewriter and similar mediums that use iso-wide character grids. |
tv | TV type devices (low resolution, limited screen roll). |
Value
Value | Describe |
---|---|
width |
Specifies the width of the target display area. You can use the "min-" and "max-" prefixes. Example: media "screen and (min-width: 500px)" |
height |
Specify the height of the target display area. You can use the "min-" and "max-" prefixes. Example: media "screen and (max-height: 700px)" |
device-width |
Specify the width of the target display/paper. You can use the "min-" and "max-" prefixes. Example: media "screen and (device-width: 500px)" |
device-height |
Specify the height of the target display/paper. You can use the "min-" and "max-" prefixes. Example: media "screen and (device-height: 500px)" |
orientation |
Specify the direction of the target display/paper. Possible values: "portrait" or "landscape" Example: media "all and (orientation: landscape)" |
aspect-ratio |
Specify the width/height ratio of the target display area You can use the "min-" and "max-" prefixes. Example: media "screen and (aspect-ratio: 16 / 9)" |
device-aspect-ratio |
Specify the device-width/device-height ratio for the target display/paper You can use the "min-" and "max-" prefixes. Example: media "screen and (aspect-ratio: 16 / 9)" |
color |
Specify the bits/colors of the target display You can use the "min-" and "max-" prefixes. Example: media"screen and (color:3)" |
color-index |
Specify the number of colors that the target display can handle. You can use the "min-" and "max-" prefixes. Example: media "screen and (min-color-index: 256)" |
monochrome |
Specifies bits/pixels in monochrome frame buffering. You can use the "min-" and "max-" prefixes. Example: media"screen and (monochrome: 2)" |
resolution |
Specify the pixel density (dpi or dpcm) of the target display/paper. You can use the "min-" and "max-" prefixes. Example: media "print and (resolution:300dpi)" |
scan |
Specify how the tv display is scanned. Possible values: "progressive" and "interlace". Example: media "tv and (scan:interlace)" |
grid |
Specify whether the output device is a grid or bitmap. Possible value: "1" is grid, otherwise "0". Example: media "handheld and (grid:1)" |
HTML .lt;style> tags