Specifying the Media for a Style

The media attributes specifies when a style should be applied.

 
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style media="screen" type="text/css">
a {
      background-color: grey;
      color: white;
      padding: 0.5em;
}
</style>
<style media="print">
a {
      color: Red;
      font-weight: bold;
      font-style: italic
}
</style>
</head>
<body>
      <a href="http://java2s.com">Visit java2s.com</a>
</body>
</html>

The allowed values for the media attribute:

Device	Description
all	Apply this style to any device (default).
aural	Apply this style to speech synthesizers.
braille	Apply this style to Braille devices.
handheld	Apply this style to handheld devices.
projection	Apply this style to projectors.
print	Apply this style in print preview and when the page is printed.
screen	Apply this style when showing on a computer screen.
tty	Apply this style to fixed-width devices, such as teletypes.
tv	Apply this style to televisions.

 
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style media="screen AND (max-width:500px)" type="text/css">
a {
      background-color: grey;
      color: white;
      padding: 0.5em;
}
</style>
<style media="screen AND (min-width:500px)" type="text/css">
a {
      color: Red;
      font-style: italic
}
</style>
</head>
<body>
      <a href="http://java2s.com">Visit java2s.com</a>
</body>
</html>

You can use AND to combine a device with a feature. You can also use NOT and a comma (,) which represents OR.

The following table lists features for the media Attribute of the style Element

Feature	Description
width/height	Specifies the width or height of the browser window. Units are expressed as px for pixels. For example, width:200px
device-width / device-height	Specifies the width or height of the entire device and not just the browser window. Units are expressed as px for pixels. For example, min-device-height:200px
resolution	Specifies the pixel density. Units are dpi or dpcm. For example, max-resolution:600dpi
orientation	Specifies the orientation of the device. The supported values are portrait and landscape. Forexample, orientation:portrait
aspect-ratio / device-aspectratio	Specifies the pixel ratio of the browser window or the entire device. Values are expressed as the number of width pixels over the number of height pixels. For example, min-aspect-ratio:16/9
color / monochrome	Specifies the number of bits per pixel of color. For example, min-monochrome:2
color-index	Specifies the number of colors. For example, max-color-index:256
scan	Specifies the scanning mode of a TV. The supported values are progressive and interlace. Forexample, scan:interlace
grid	Specifies the device type. The supported values are 0 and 1, where 1 is a grid device. For example, grid:0