Open In App

HTML | <link> media Attribute

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The HTML link media attribute is used to specify what media/device the target resource is optimized for. This attribute used to specify a different style for different media type. 

The media attribute can accept several values. 

Syntax:

<link media="value">

Possible Operators:

Value Description
and AND operator
not NOT operator
, OR operator

Devices:

Value Description
all Suitable for all devices
aural Speech synthesizers
braille Braille feedback devices
handheld Handheld devices (small screen, limited bandwidth)
projection Projectors
print Print preview mode/printed pages
screen Computer screens
tty Teletypes and similar media using a fixed-pitch character grid
tv Low resolution or limited scroll ability type devices like Television.

Values:

Value Description
width Targeted display area’s width.
height Targeted display area’s height
device-width Target display or paper’s width.
device-height Target display or paper’s height.
orientation Target display or paper’s orientation.
aspect-ratio Width/height ratio of the targeted display area.
device-aspect-ratio Device-width/device-height ratio of the target display/paper.
color Bits per color of target display.
color-index Number of colors the target display can handle.
monochrome Bits per pixel in a monochrome frame buffer.
resolution Pixel density (dpi or dpcm) of the target display/paper.
scan Scanning method of a tv display.
grid If the output device is grid or bitmap.

Note: Prefixes like “min-“ and “max-“ can be used. Example: 

html




<!DOCTYPE html>
<html>
 
<head>
    <link rel="stylesheet"
          type="text/css"
          href="index_screen.css">
 
    <link rel="stylesheet"
          type="text/css"
          href="index_print.css"
          media="print">
</head>
 
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <p><a href="index.html" target="_blank">
      Click here
      </a>
    </center>
</body>
 
</html>


Output:

  

Supported Browsers: The browsers supported by HTML link media attribute are listed below:

  • Google Chrome 1 and above
  • Edge 12 and above
  • Internet Explorer 6 and above
  • Firefox 1 and above
  • Apple Safari 4 and above
  • Opera 12.1 and above


Last Updated : 06 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads