How to define media type of style tag in HTML5 ?
Last Updated :
05 Jun, 2023
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.
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
Print version
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...