style Media

Description

The media attribute from style element lets you specify when a style should be applied to the document.

Example

The following code gives an example of how you can use this attribute.


<!DOCTYPE HTML>
<html>
<head>
<style  media="screen" type="text/css">
a  {<!-- w w w  . ja v a  2s  .  co m-->
    background-color: grey;
    color: white;
    padding:  0.5em;
}
</style>
<style  media="print">
a{
    color:Red;
    font-weight:bold;
    font-style:italic
}
</style>
</head>
<body>
    <p>This is a test.</p>
    <a href="http://java2s.com">Visit  java2s.com</a>
</body>
</html>

Click to view the demo

The code above defined two style elements with different media value.

The browser will apply the first style when the HTML is displayed onscreen, and the second style when the page is printed.

Condition

You can create very specific conditions for a style.

First, you can specify the device. Possible values are listed in the following table.

DeviceDescription
allApply this style to any device (this is the default).
auralApply this style to speech synthesizers.
brailleApply this style to Braille devices.
handheldApply this style to handheld devices.
projectionApply this style to projectors.
printApply this style in print preview and when the page is printed.
screenApply this style when the content is shown on a computer screen.
ttyApply this style to fixed-width devices, such as teletypes.
tvApply this style to televisions.

Feature

Using the media features allows you to be even more specific.

The following code adds specificity to a style Element.


<!DOCTYPE HTML>
<html>
<head>
<style  media="screen AND  (max-width:500px)" type="text/css">
a  {<!-- ww  w.j  a va2 s . c  o m-->
    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>
    <p>This is a test.</p>
    <a href="http://java2s.com">Visit  java2s.com</a>
</body>
</html>

Click to view the demo

The code above used the width feature to differentiate between two styles. The first will be used when the browser window is narrower than 500 pixels, and the second when the window is wider than 500 pixels.

You can used AND to combine a device with a feature.

In addition to AND, you can also use NOT, or a comma (,) to represent OR. This allows you to create complex and quite specific conditions in which to apply a style.

The available features, along with their modifiers, are listed in the following table.

Unless otherwise noted, you can modify these features with min- or max- to create thresholds rather than specific values.

  • width specifies the width of the browser window.
    Units are expressed as px for pixels.
    Example:width:200px
  • height Specifies the height of the browser window.
    Units are expressed as px for pixels.
    Example:height:200px
  • device-width Specifies the width of the entire device and not just the browser window.
    Units are expressed as px for pixels.
    Example:min-device-width:200px
  • device-height Specifies the height of the entire device and not just the browser window.
    Units are expressed as px for pixels.
    Example:min-device-height:200px
  • resolution Specifies the pixel density of the device.
    Units are dpi (dots per inch) or dpcm (dots per centimeter).
    Example:max-resolution:600dpi
  • orientation Specifies the orientation of the device.
    The supported values are portrait and landscape.
    There are no modifiers for this feature.
    Example:orientation:portrait
  • aspect-ratio Specifies the pixel ratio of the browser window device.
    Values are expressed as the number of width pixels over the number of height pixels.
    Example:aspect-ratio:16/9
  • device-aspect-ratio 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.
    Example:min-aspect-ratio:16/9
  • color monochrome Specifies the number of bits per pixel of color or monochrome devices.
    Example:min-monochrome:2
  • color-index Specifies the number of colors that the display can show.
    max-color-index:256
  • scan Specifies the scanning mode of a TV. The supported values are progressive and interlace.
    There are no modifiers for this feature.
    Example:scan:interlace
  • grid Specifies the type of device. Grid devices use fixed grids to display content; for example, character-based terminals and one-line pager displays.
    The supported values are 0 and 1, where 1 is a grid device. There are no modifiers for this feature.
    Example:grid:0




















Home »
  HTML CSS »
    HTML »




HTML Introduction
HTML Document
HTML Section
HTML Group Content
HTML Text Marker
HTML Table
HTML Form
HTML Embed