The media attribute lets you control what styles are applied to which media. : media « Style Basics « HTML / CSS






  1. HTML / CSS
  2. Style Basics
  3. media

The media attribute lets you control what styles are applied to which media.

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
    <head>
      <title>media</title>
<style type='text/css'>
p {
    font: 12px sans-serif;
    background: yellow;
    padding: 10px;
}
@media screen {
    p#print {
        display: none;
    }
    p#screen {
        border: 10px solid gold;
    }
}
@media print {
    p {
        padding: 0.05in;
    }
    p#print {
        border: 10pt solid gold;
    }
    p#screen {
        display: none;
    }
}
</style>


    </head>
    <body>
        <p id='screen'>
            The media attribute lets you control what styles are applied to which
            media.  PC and Mac browsers use the values print, all, and screen,
            but there are many more media types than these.
        </p>
        <p id='print'>
            The @media rule can also be used to control styles based on medium,
            but it can do so directly from the style sheet, with no need for HTML.
        </p>
        <p>
            The @media rule simply wraps the rules that are to be applied to a
            particular medium.
        </p>
    </body>
</html>








Related examples in the same category

1.The media attribute lets you control what styles are applied to whichmedia.
2.media="all"
3.media="Screen"
4.insert a page break in the document for printing purposes.
5.insert a page break before an element by using page-break-before:always
6.Link two style files, one for screen, one for print
7.these rules will only apply when printing
8.Language ISO subcode