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