style media='' - HTML CSS HTML Tag

HTML CSS examples for HTML Tag:style

  1. HOME
  2. HTML CSS
  3. HTML Tag
  4. style

Introduction

The media attributes sets when a style should be applied to the document.

Using the media Attribute of the style Element

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
   <head> 
      <style media="screen" type="text/css">
a {<!--from  w  ww .ja v a  2 s. 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>
          I like 
         <code id="myId">HTML</code>
          and CSS. 
      </p> 
      <a href="http://java2s.com">Visit java2s.com</a> 
      <a href="page2.html">Page 2</a>  
   </body>
</html>

The Defined Device Values for the media Attribute of the style Element

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

Adding Specificity to a style Element

Demo Code

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html>
    <head>
        <style media="screen AND (max-width:500px)" type="text/css">
            a {<!-- ww w  .ja va 2  s.  com-->
                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>
            I like <code id="myId">HTML</code> and CSS.
        </p>
        <a href="http://java2s.com">Visit java2s.com</a>
        <a href="page2.html">Page 2</a>
          </body>
</html>

Features for the media Attribute of the style Element

Feature Description Example
width height set the width or height of the browser window as px for pixels. width:200px
device-width set the width or height of the entire device as px for pixels.min-device-width:200px
device-heightset the width or height of the entire device as px for pixels. min-device-height:200px
resolution set the pixel density of the device. Units are dpi (dots per inch) or dpcm (dots per centimeter).max-resolution:600dpi
orientationset the orientation of the device. The supported values are portrait and landscape. There are no modifiers for this feature. orientation:portrait
aspect-ratio device-aspect-ratio set 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. min-aspect-ratio:16/9
color monochrome set the number of bits per pixel of color or monochrome devices. min-monochrome:2
color-indexset the number of colors that the display can show. max-color-index:256
scan set the scanning mode of a TV. N/A
grid set 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. grid:0

Related Tutorials