HTML <style> with media Attribute

February 10, 2021 7:26 pm IST

You are Here:

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>

Run

Devices Value

Value	Explanation
all	Suitable for all devices.
print	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.