HTML <style> with media Attribute
HTML <style> with media Attribute
The media attribute specifies which media/device the style should be applied to.
Example
HTML Online Editor
<!DOCTYPE html>
<html>
<head>
<style>
h1{
color:red;
}
h2{
color:blue;
}
p{
color:green;
}
</style>
<style media="print">
h1, h2, p{
color:orange;
}
</style>
</head>
<body>
<h1>Fruit</h1>
<p>I Like Banana</p>
<h2>Car</h2>
<p>I Like Jaguar</p>
</body>
</html>
Devices Value
| Value | Explanation |
|---|---|
| all | Suitable for all devices. |
| Suitable for print out.Hard Copy. | |
| screen | Suitable for Computer Screen. Large Screen. |
| speech | Suitable for speech synthesizers. |
Key Value
| Value | Explanation |
|---|---|
| width | Specifies the width of the viewport. |
| height | Specifies the height of the viewport. |
| aspect-ratio | Specifies the width-to-height aspect ratio of the viewport. |
| orientation | Specifies the orientation of the viewport. |
| resolution | Specifies the pixel density of the output device. |
| scan | Specifies the scanning process of the output device. |
| grid | Specifies whether the device uses a grid or bitmap screen. |
| update | Specifies how frequently the output device can modify the appearance of the content. |
| overflow-block | Specifies how does the output device handle content that overflows the viewport along the block axis. |
| overflow-inline | Specifies how does the output device handle content that overflows the viewport along the inline axis. |
| color | Specifies the number of bits per color component of the output device, or zero if the device is black and white. |
| color-gamut | Specifies the approximate range of colors that are supported by the user agent and output device. |
| color-index | Specifies 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-mode | Specifies the display mode of the application. |
| monochrome | Specifies the bits per pixel in a monochrome frame buffer. |
| inverted-colors | Specifies whether the user agent or underlying OS is inverting colors. |
| pointer | Specifies whether the user has a pointing device (such as a mouse), and if so, how accurate the primary pointing device is. |
| hover | Specifies whether the user's primary input mechanism can hover over elements. |
| any-pointer | Specifies whether the user has any pointing device (such as a mouse), and if so, how accurate it is. |
| any-hover | Specifies whether any available input mechanism can hover over elements. |
| light-level | Light level of the environment. |
| scripting | Is scripting (e.g., JavaScript) available? |
Supported Logical Operators
| Value | Explanation |
|---|---|
| and | The and operator is used for combining multiple media features together into a single media query. |
| not | The not operator is used to negate a media query, returning true if the query would otherwise return false. |
| only | The 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. |
| , (comma) | 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. |
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.