HTML <style> media attribute

The HTML <style> tag

Definition and usage

media Attribute used to specify the media/device for which the CSS style is targeted (optimized).

This attribute is used to specify the style that applies to a specific device (such as iPhone), voice, or print media.

Tip:This attribute can accept multiple values.

Example

Example 1

Specified styles for printing:

<style media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>

Try it yourself

Example 2

The width feature of the media attribute is used to distinguish between the two groups of styles:

<style media="screen AND (max-width:500px)" type="text/css">
a {
  background-color: grey;
  color: white;
  padding: 15px;
}
</style>
<style media="screen AND (min-width:500px)" type="text/css">
a {
  color: red;
  font-weight: 400;
}
</style>

Try it yourself

Note:The first group of styles is used when the browser window width is less than 500 pixels, and the second group of styles is used when the window width is greater than 500 pixels.

Syntax

<style media="value>

Possible operators

Operators Description
and Specified AND operator.
not Specified NOT operator.
, Specified OR operator.

The conditions for using the style can be designed very meticulously. The first thing to clarify is the type of device targeted. The following table summarizes all the values that comply with the regulations:

Device

Device Description
all Default. Suitable for all devices.
aural Voice synthesizer.
braille Braille feedback devices.
handheld Handheld devices (small screen, limited bandwidth).
projection Projector.
print Print preview mode/print page.
screen Computer screen.
tty Teletype machines and similar media using a fixed spacing character grid.
tv Television-type devices (low resolution, limited scrolling capability).

The browser is responsible for interpreting device classification. Some device types (such as screen and print) have a relatively consistent interpretation across various browsers, but the interpretation of others (such as handheld) may be more arbitrary. Therefore, it is very necessary to verify that the interpretation of the specific device by the targeted browser is consistent with your own.

Features

Features Description
width

Specifies the width of the target display area.

Prefixes "min-" and "max-" can be used.

For example: media="screen and (min-width:500px)"
height

Specifies the height of the target display area.

Prefixes "min-" and "max-" can be used.

For example: media="screen and (max-height:700px)"
device-width

Specifies the width of the target display/paper.

Prefixes "min-" and "max-" can be used.

For example: media="screen and (device-width:500px)"
device-height

Specifies the height of the target display/paper.

Prefixes "min-" and "max-" can be used.

For example: media="screen and (device-height:500px)"
orientation

Specifies the orientation of the target display/paper.

Supported values: portrait or landscape.

This feature has no qualifiers.

For example: media="all and (orientation: landscape)"
aspect-ratio

Specifies the width/height ratio of the target display area.

Prefixes "min-" and "max-" can be used.

For example: media="screen and (aspect-ratio:16/9)"
device-aspect-ratio

Specifies the device width/height ratio of the target display/paper.

Prefixes "min-" and "max-" can be used.

For example: media="screen and (aspect-ratio:16/9)"
color

Specifies the number of bits per color that the target display can handle.

Prefixes "min-" and "max-" can be used.

For example: media="screen and (color:3)"
color-index

Specifies the number of colors that the target display can handle.

Prefixes "min-" and "max-" can be used.

For example: media="screen and (min-color-index:256)"
monochrome

Specifies the number of bits per pixel in the monochrome frame buffer.

Prefixes "min-" and "max-" can be used.

For example: media="screen and (monochrome:2)"
resolution

Specifies the pixel density (dpi or dpcm) of the target display/paper.

Prefixes "min-" and "max-" can be used.

For example: media="print and (resolution:300dpi)"
scan

Specifies the scanning mode of the television.

Supported values include progressive and interlace.

This feature has no qualifiers.

For example: media="tv and (scan:interlace)"
grid

Specify whether the output device is a grid or bitmap.

Grid-type devices use a fixed grid to display content, such as character-based terminals and pagers that display on a single line.

The supported values are 0 and 1 (1 represents grid-type devices).

This feature has no qualifiers.

For example: media="handheld and (grid:1)"

The width and other properties are usually used with the qualifiers min and max. It is also acceptable to let the use of styles depend on very precise window sizes without these qualifiers, but adding qualifiers makes the conditions more flexible.

The table above lists and describes the various features available. Unless otherwise specified, these features can be modified with min- and max- to form thresholds rather than precise values.

As with the conditions of specified devices, these features are also interpreted by the browser. The specifics of what browsers recognize as features and when they are considered to exist and be usable are complex and varied. If you are to apply styles based on these features, be sure to conduct comprehensive testing and be prepared with fallback styles in case the expected features are not available.

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support

The HTML <style> tag