HTML <link> with media Attribute

HTML <link> with media Attribute

The media attribute specifies on what device the linked resource will be displayed.

Example

HTML Online Editor
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style-print.css" media="print"> </head> <body> <h1>This is a Heading.</h1> </body> </html>

Devices Value

ValueExplanation
allSuitable for all devices.
printSuitable for print out. Hard Copy.
screenSuitable for Computer Screen. Large Screen.
speechSuitable for speech synthesizers.

Key Value

ValueExplanation
widthSpecifies the width of the viewport.
heightSpecifies the height of the viewport.
aspect-ratioSpecifies the width-to-height aspect ratio of the viewport.
orientationSpecifies the orientation of the viewport.
resolutionSpecifies the pixel density of the output device.
scanSpecifies the scanning process of the output device.
gridDoes the device use a grid or bitmap screen?
updateSpecifies how frequently the output device can modify the appearance of content.
overflow-blockSpecifies how does the output device handle content that overflows the viewport along the block axis?
overflow-inlineCan content that overflows the viewport along the inline axis be scrolled?
colorSpecifies the number of bits per color component of the output device, or zero if the device is black and white. ie) No Color.
color-gamutSpecifies the approximate range of colors that are supported by the user agent and output device.
color-indexSpecifies number of entries in the output device's color lookup table.
Note : If the device does not use such a table then it is zero.
display-modeSpecifies the display mode of the application.
monochromeSpecifies the bits per pixel in a monochrome frame buffer.
inverted-colorsIs the user agent or underlying OS inverting colors?
pointerIs the primary input mechanism a pointing device, and if so, how accurate is it?
hoverDoes the primary input mechanism allow the user to hover over elements?
any-pointerIs any available input mechanism a pointing device, and if so, how accurate is it?
any-hoverDoes any available input mechanism allow the user to hover over elements?
light-levelLight level of the environment.
scriptingIs scripting (e.g., JavaScript) available?

Supported Logical Operators

ValueExplanation
andThe and operator is used for combining multiple media features together into a single media query.
notThe not operator is used to negate a media query, returning true if the query would otherwise return false.
onlyThe only operator is used to apply a style only if an entire query matches, and is useful for preventing older browsers from applying selected styles.
,The comma operator is used to seperate each media. Here style will be applied to the entire document, if any one of the media satisfies the condition.

Attribute Value

ValueExplanation
media_querySpecifies on what device the linked resource will be displayed.

Reminder

Hi Developers, we almost covered 99.5% of HTML Tutorials with examples for quick and easy learning.

We are working to cover every Single Concept in HTML.

Please do google search for:

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Meet the Author