HTML <link> media attribute

HTML <link> Tag

Definition and Usage

media This attribute specifies for which media/device the target resource is optimized.

media This attribute specifies on which device the linked document will be displayed.

This attribute is mainly used with CSS style sheets to specify different styles for different media types.

media The attribute can accept multiple values.

Example

Two different style sheets are used for two different media types (screen and print):

<head>
  <link rel="stylesheet" type="text/css" href="theme.css">
  <link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>

Try it yourself

Syntax

<link media="value>

Possible operators

Operators Description
and Specifies the AND operator.
not Specifies the NOT operator.
, Specifies the OR operator.

Device

Device Description
all Default. Used for all media type devices.
print Used for print preview mode/print page.
screen Used for computer screens, tablets, smartphones, and more.
speech Screen readers used to read pages.
aural Deprecated.Voice synthesizers.
braille Deprecated.Braille feedback devices.
handheld Deprecated.Handheld devices (small screen, limited bandwidth).
Projection Deprecated.Projector.
tty Deprecated.Teletype machines and similar media using fixed spacing character grids.
tv Deprecated.Television type devices (low resolution, limited scrolling capability).

Value

Value Description
aspect-ratio

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

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

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

Specifies the number of bits per color of the target display.

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

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.

Example: media="screen and (min-color-index:256)"
device-aspect-ratio Deprecated.Specifies the device-width/device-height ratio of the target display or paper.
device-width Deprecated.Specifies the width of the target display or paper.
device-height Deprecated.Specifies the height of the target display or paper.
grid

Specifies whether the output device is a grid or bitmap.

Possible values: "1" represents grid, "0" is other.

Example: media="handheld and (grid:1)"
height

Specifies the height of the target display area.

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

Example: media="screen and (max-height:700px)"
monochrome

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

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

Example: media="screen and (monochrome:2)"
orientation

Specify the direction of the target display/paper.

Possible values: "portrait" or "landscape".

Example: media="all and (orientation: landscape)"
resolution

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

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

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

Specify the scanning method of the TV display.

Possible values are: "progressive" and "interlace".

Example: media="tv and (scan:interlace)"
width

Specify the width of the target display area.

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

Example: media="screen and (min-width:500px)"

Browser Support

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

HTML <link> Tag