Open In App
Related Articles

How to define media type of style tag in HTML5 ?

Improve Article
Save Article
Like Article

In this article, we learn how to define the media type of the style tag in HTML5. In HTML5, the media type of a style tag can be defined using the “media” attribute. By specifying the media type, such as “screen” for displaying on a screen or “print” for printing, the style rules within the style tag will be applied accordingly to the specific media output.

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


<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. 


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


  • Screen version output:

Screen version

  • Print version output:

Print version

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 05 Jun, 2023
Like Article
Save Article
Similar Reads
Complete Tutorials