Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

How to define media type of style tag in HTML5 ?

  • Last Updated : 22 Apr, 2021

In this article, we learn how to define the media type of the style tag in HTML5. 

Approach: The task can be simply done by using the media attribute of the <style> element. It is used to specify the style is for specific devices like print media or speech. This attribute can accept several values. 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Syntax:

<style media="value">

HTML Code: Below code illustrates the media attribute to define the media type of the style tag in HTML5. The below code specifies that styles are for screen and print media devices. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style type="text/css" media="screen">
        .heading {
            color: red;
        }
  
        h2 {
            color: green;
            font-weight: bold;
        }
    </style>
  
    <style type="text/css" media="print">
        .heading {
            color: blue;
        }
  
        h2 {
            color: green;
            font-weight: bold;
        }
    </style>
</head>
  
<body>
    <h1 class="heading">
        GeeksforGeeks
    </h1>
      
    <h2>
        How to define the media type 
        of the style tag in HTML5?
    </h2>
</body>
  
</html>

Output:

  • Screen version output:

    Screen version

  • Print version output:

    Print version




My Personal Notes arrow_drop_up
Recommended Articles
Page :