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 attributeThe 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.
<link> tag
-
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.
Next Previous
Was this article helpful?