Horje

How to create HTML <link> media Attribute

Two different style sheets for two different media types (screen and print).

Definition and Usage

The media attribute specifies what media/device the target resource is optimized for.

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

The media attribute can accept several values.


Browser Support

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. Used for all media type devices
print Used for Print preview mode/printed pages
screen Used for computer screens, tablets, smart-phones etc.
speech Used for screenreaders that "reads" the page out loud
aural Deprecated. Speech synthesizers
braille Deprecated. Braille feedback devices
handheld Deprecated. Handheld devices (small screen, limited bandwidth)
projection Deprecated. Projectors
tty Deprecated. Teletypes and similar media using a fixed-pitch character grid
tv Deprecated. Television type devices (low resolution, limited scroll ability)

Values

Value Description
aspect-ratio Specifies the width/height ratio of the targeted display area.
"min-" and "max-" prefixes can be used.
Example: media="screen and (max-aspect-ratio:16/9)"
color Specifies the bits per color of target display.
"min-" and "max-" prefixes can be used.
Example: media="screen and (min-color:3)"
color-index Specifies the number of colors the target display can handle.
"min-" and "max-" prefixes 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/paper.
device-width Deprecated. Specifies the width of the target display/paper.
device-height Deprecated. Specifies the height of the target display/paper.
grid Specifies if the output device is grid or bitmap.
Possible values are "1" for grid, and "0" otherwise.
Example: media="handheld and (grid:1)"
height Specifies the height of the  targeted display area.
"min-" and "max-" prefixes can be used.
Example: media="screen and (max-height:700px)"
monochrome Specifies the bits per pixel in a monochrome frame buffer.
"min-" and "max-" prefixes can be used.
Example: media="screen and (min-monochrome:2)"
orientation Specifies the orientation of the target display/paper.
Possible values: "portrait" or "landscape"
Example: media="all and (orientation: landscape)"
resolution Specifies the pixel density (dpi or dpcm) of the target display/paper.
"min-" and "max-" prefixes can be used.
Example: media="print and (min-resolution:300dpi)"
scan Specifies scanning method of a tv display.
Possible values are "progressive" and "interlace".
Example: media="tv and (scan:interlace)"
width Specifies the width of the targeted display area.
"min-" and "max-" prefixes can be used.
Example: media="screen and (min-width:500px)"
index.html
Example: HTML
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_screen.css">
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_print.css" media="print">
</head>
<body>

<h1>Horje Example</h1>
<p><a href="tryhtml_link_media.htm" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to create HTML <link> media Attribute



Single Articles
How to create HTML <link> TagHTML Tag
How to create crossorigin Attributes on HTML <link> TagHTML Tag
How to create HTML <link> href AttributeHTML Tag
How to create HTML <link> hreflang AttributeHTML Tag
How to create HTML <link> media AttributeHTML Tag
How to use and value on HTML <link> media AttributeHTML Tag
How to use not value on HTML <link> media AttributeHTML Tag
How to use , value on HTML <link> media AttributeHTML Tag
How to use and print on HTML <link> media AttributeHTML Tag
How to use all value on HTML <link> media AttributeHTML Tag
How to use print value on HTML <link> media AttributeHTML Tag
How to use screen value on HTML <link> media AttributeHTML Tag
How to use speech value on HTML <link> media AttributeHTML Tag
How to use speech value on HTML <link> media AttributeHTML Tag
How to use braille value on HTML <link> media AttributeHTML Tag
How to use handheld value on HTML <link> media AttributeHTML Tag
How to use projection value on HTML <link> media AttributeHTML Tag
How to use tty value on HTML <link> media AttributeHTML Tag
How to use tv value on HTML <link> media AttributeHTML Tag
How to use aspect-ratio value on HTML <link> media AttributeHTML Tag
How to use color value on HTML <link> media AttributeHTML Tag
How to use color-index value on HTML <link> media AttributeHTML Tag
How to use device-aspect-ratio value on HTML <link> media AttributeHTML Tag
How to use device-width value on HTML <link> media AttributeHTML Tag
How to use device-height value on HTML <link> media AttributeHTML Tag
How to use grid value on HTML <link> media AttributeHTML Tag
How to use height value on HTML <link> media AttributeHTML Tag
How to use monochrome value on HTML <link> media AttributeHTML Tag
How to use orientation value on HTML <link> media AttributeHTML Tag
How to use resolution value on HTML <link> media AttributeHTML Tag
How to use scan value on HTML <link> media AttributeHTML Tag
How to use width value on HTML <link> media AttributeHTML Tag
How to create HTML <iframe> referrerpolicy Attribute on HTML <link> TagHTML Tag
How to create HTML <iframe> no-referrer Attribute on HTML <link> TagHTML Tag
How to create HTML <iframe> no-referrer-when-downgrade Attribute on HTML <link> TagHTML Tag
How to create HTML <iframe> origin Attribute on HTML <link> TagHTML Tag
How to create HTML <iframe> origin-when-cross-origin Attribute on HTML <link> TagHTML Tag
How to create HTML <iframe> same-origin Attribute on HTML <link> TagHTML Tag
How to create HTML <iframe> strict-origin Attribute on HTML <link> TagHTML Tag
How to create HTML <iframe> strict-origin-when-cross-origin Attribute on HTML <link> TagHTML Tag
How to create HTML <iframe> unsafe-url Attribute on HTML <link> TagHTML Tag
How to add HTML <link> rel AttributeHTML Tag
How to add HTML alternate <link> rel AttributeHTML Tag
How to add HTML author <link> rel AttributeHTML Tag
How to add HTML dns-prefetch <link> rel AttributeHTML Tag
How to add HTML help <link> rel Attribute HTML Tag
How to add HTML icon <link> rel AttributeHTML Tag
How to add HTML license <link> rel AttributeHTML Tag
How to add HTML next <link> rel AttributeHTML Tag
How to add HTML pingback <link> rel AttributeHTML Tag
How to add HTML preconnect <link> rel AttributeHTML Tag
How to add HTML prefetch <link> rel AttributeHTML Tag
How to add HTML preload <link> rel AttributeHTML Tag
How to add HTML prerender <link> rel AttributeHTML Tag
How to add HTML prev <link> rel AttributeHTML Tag
How to add HTML search <link> rel AttributeHTML Tag
How to add HTML stylesheet <link> rel AttributeHTML Tag
How to add HTML <link> sizes AttributeHTML Tag
How to add HTML <link> sizes HeightxWidth AttributeHTML Tag
How to add HTML <link> any sizes AttributeHTML Tag
How to add HTML <link> title AttributeHTML Tag
How to add HTML <link> type AttributeHTML Tag


Related Articles
What is HTML <!--...--> Tag HTML Tag
What is HTML <!DOCTYPE> Declaration HTML Tag
What is HTML Elements and Doctypes HTML Tag
What is HTML <a> Tag HTML Tag
What is HTML <abbr> Tag HTML Tag
What is HTML <acronym> Tag HTML Tag
What is HTML <address> Tag HTML Tag
What is HTML <applet> Tag HTML Tag
What is HTML <area> Tag HTML Tag
What is HTML <article> Tag HTML Tag
What is HTML <aside> Tag HTML Tag
What is HTML <audio> Tag HTML Tag
What is HTML <b> Tag HTML Tag
What is HTML <base> Tag HTML Tag
What is HTML <basefont> Tag HTML Tag
What is HTML <bdi> Tag HTML Tag
What is HTML <bdo> Tag HTML Tag
What is HTML <big> Tag HTML Tag
What is HTML <blockquote> Tag HTML Tag
What is HTML <body> Tag HTML Tag
What is HTML <br> Tag HTML Tag
What is HTML <button> Tag HTML Tag
What is HTML <canvas> Tag HTML Tag
What is HTML <caption> Tag HTML Tag
What is HTML <center> Tag HTML Tag
What is HTML <cite> Tag HTML Tag
What is HTML <code> Tag HTML Tag
What is HTML <col> Tag HTML Tag
How to create HTML <colgroup> Tag HTML Tag
What is HTML <data> Tag HTML Tag
What is HTML <datalist> Tag HTML Tag
What is HTML <dd> Tag HTML Tag
What is HTML <del> Tag HTML Tag
What is HTML <details> Tag HTML Tag
What is HTML <dfn> Tag HTML Tag
What is HTML <dialog> Tag HTML Tag
What is HTML <dir> Tag HTML Tag
What is HTML <div> Tag HTML Tag
What is HTML <dl> Tag HTML Tag
What is HTML <dt> Tag HTML Tag
What is HTML <em> Tag HTML Tag
What is HTML <embed> Tag HTML Tag
What is HTML <fieldset> Tag HTML Tag
What is HTML <figcaption> Tag HTML Tag
What is HTML <figure> Tag HTML Tag
What is HTML <font> Tag HTML Tag
What is HTML <footer> Tag HTML Tag
What is HTML <form> Tag HTML Tag
What is HTML <frame> Tag HTML Tag
What is HTML <frameset> Tag HTML Tag
What is HTML <h1> to <h6> Tags HTML Tag
What is HTML <head> Tag HTML Tag
What is HTML <header> Tag HTML Tag
What is HTML <hgroup> Tag HTML Tag
What is HTML <hr> Tag HTML Tag
What is HTML <html> Tag HTML Tag
What is HTML <i> Tag HTML Tag
What is HTML <iframe> Tag HTML Tag
What is HTML <img> Tag HTML Tag
What is HTML <input> Tag HTML Tag
What is HTML <ins> Tag HTML Tag
What is HTML <kbd> Tag HTML Tag
What is HTML <label> Tag HTML Tag
What is HTML <legend> Tag HTML Tag
What is HTML <li> Tag HTML Tag
What is HTML <link> Tag HTML Tag
What is HTML <main> Tag HTML Tag
What is HTML <map> Tag HTML Tag
What is HTML <mark> Tag HTML Tag
What is HTML <menu> Tag HTML Tag
What is HTML <meta> Tag HTML Tag
What is HTML <meter> Tag HTML Tag
What is HTML <nav> Tag HTML Tag
What is HTML <noframes> Tag HTML Tag
What is HTML <noscript> Tag HTML Tag
What is HTML <object> Tag HTML Tag
What is HTML <ol> Tag HTML Tag
What is HTML <optgroup> Tag HTML Tag
What is HTML <option> Tag HTML Tag
What is HTML <output> Tag HTML Tag
What is HTML <p> Tag HTML Tag
What is HTML <param> Tag HTML Tag
What is HTML <picture> Tag HTML Tag
What is HTML <pre> Tag HTML Tag
What is HTML <progress> Tag HTML Tag
What is HTML <q> Tag HTML Tag
What is HTML <rp> Tag HTML Tag
What is HTML <rt> Tag HTML Tag
What is HTML <ruby> Tag HTML Tag
What is HTML <s> Tag HTML Tag
What is HTML <samp> Tag HTML Tag
What is HTML <script> Tag HTML Tag
What is HTML <search> Tag HTML Tag
What is HTML <section> Tag HTML Tag
What is HTML <select> Tag HTML Tag
What is HTML <small> Tag HTML Tag
What is HTML <source> Tag HTML Tag
What is HTML <span> Tag HTML Tag
What is HTML <strike> Tag HTML Tag
What is HTML <strong> Tag HTML Tag
What is HTML <style> Tag HTML Tag
What is HTML <sub> Tag HTML Tag
What is HTML <summary> Tag HTML Tag
What is HTML <sup> Tag HTML Tag
What is HTML <svg> Tag HTML Tag
What is HTML <table> Tag HTML Tag
What is HTML <tbody> Tag HTML Tag
What is HTML <td> Tag HTML Tag
What is HTML <template> Tag HTML Tag
What is HTML <textarea> Tag HTML Tag
What is HTML <tfoot> Tag HTML Tag
What is HTML <th> Tag HTML Tag
What is HTML <thead> Tag HTML Tag
What is HTML <time> Tag HTML Tag
What is HTML <title> Tag HTML Tag
What is HTML <tr> Tag HTML Tag
What is HTML <track> Tag HTML Tag
What is HTML <tt> Tag HTML Tag
What is HTML <u> Tag HTML Tag
What is HTML <ul> Tag HTML Tag
What is HTML <var> Tag HTML Tag
What is HTML <video> Tag HTML Tag
How to add HTML <wbr> Tag HTML Tag

Type:
Html
Category:
Web Tutorial
Sub Category:
HTML Tag
Uploaded by:
Admin



Share on: