HTML <link> mediaAttribute
Examples
Two different stylesheets for two different media types (computer screen and print):
<head>
<link rel="stylesheet" type="text/css" href="theme.css.html">
<link rel="stylesheet" type="text/css" href="print.css.html" media="print">
</head>
<link rel="stylesheet" type="text/css" href="theme.css.html">
<link rel="stylesheet" type="text/css" href="print.css.html" media="print">
</head>
Try it Yourself »
Browser Support
All major browsers support the media attribute.
Definition and Usage
The media attribute specifies what device the linked document will be displayed on.
This attribute is often used with CSS stylesheets to specify different styles for different media types.
The media attribute accepts several values.
Differences Between HTML 4.01 and HTML5
The media attribute now supports more values.
Syntax
<link media="value">
Possible Operators
| Value | Description |
|---|---|
| and | Specifies an AND operator. |
| not | Specifies a NOT operator. |
| , | Specifies an OR operator. |
Devices
| Value | Description |
|---|---|
| all | Default. Applies to all devices. |
| aural | Speech synthesizers. |
| braille | Braille feedback devices. |
| handheld | Handheld devices (small screens, limited bandwidth). |
| projection | Projectors. |
| Print preview mode / printed pages. | |
| screen | Computer screens. |
| tty | Teletypes and similar media using a monospaced character grid. |
| tv | Television-type devices (low resolution, limited 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 (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 the 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 a tv display. Possible values: "progressive" and "interlace". Example: media="tv and (scan:interlace)" |
| grid | Specifies whether the output device is a grid or bitmap. Possible values: "1" for grid, otherwise "0". Example: media="handheld and (grid:1)" |
HTML <link> Tag Other extensions