logo

HTML media attribute

The media attribute indicates that which media type the properties apply to.

<head>
<link href="files/print.css" rel="stylesheet" media="print">
<link href="files/screen.css" rel="stylesheet" media="screen">
</head>
</>

There are two stylesheets. One style sheet is for print media. And the other stylesheet is for screen media.

Attribute values

All possible values of media attribute

The value of media attribute is valid media query.

The following are valid media queries.

  • screen (for digital media)
  • print (for print media)
  • projection (for projections)
  • 3d-glasses

Related Tags

The tags that support media attribute

<style> tag

<style type="text/css" media="print">
.design{
 background-color: lightblue;
 color:white;
 width:100%;
 float:left;
 height:500px;
}
</style>

<style type="text/css" media="screen">
.design{
 background-color: lightgreen;
 color:white;
 width:50%;
 float:left;
 height:700px;
}
</style>
 <div class="design">Two style elements are used. One is for print media and the other one is for print media. Here second stylesheet is used because it is print media.</div>

Try</>

media attribute indicates that separate styles can be applied on different media.

media attribute represents that different versions of style sheets should be applied on different media.

If the media attribute is omitted in the link or style elements then style sheet applies to all the media.

Was this article helpful?