HTML media attribute

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

Example

<!DOCTYPE html>
<html>
<head>
<link href="files/print.css" rel="stylesheet" media="print">
<link href="files/screen.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="design">
This is a div element and is usually used to design the block.
</div>	
</body>
</html>		
Try </>

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

media attribute value

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 which support this attribute are as follows.

<style> tag

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

Example

<!DOCTYPE html>
<html>
<head>
<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>
</head>

<body>
 <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>
</body>

</html>
Try</>

different CSS properties are used for print and screen media.

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

See the above given example.

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



Was this article helpful?

 

Email:

Message:

Get the newsletter