HTML5: How to specify what media/device the media resource is optimized for?

Last update on February 14 2024 12:56:05 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Define document type as HTML -->
<html><!-- Begin HTML document -->
<head><!-- Start of document header -->
<meta charset="utf-8"><!-- Define character encoding -->
<title>How to specify what media/device the media resource is optimized for</title><!-- Title of the HTML page -->
<style><!-- Start of CSS style block for screen media -->
h1 {color:#0000CD;} /* Define style for h1 elements to have dark blue color */
p {color:#FFFFFF;} /* Define style for p elements to have white color */
body {background-color:#6495ED;} /* Define background color of body element as light blue */
</style><!-- End of CSS style block for screen media -->
<style media="print"><!-- Start of CSS style block for print media -->
h1 {color:#1E90FF;} /* Define style for h1 elements to have light blue color */
p {color:#00BFFF;} /* Define style for p elements to have sky blue color */
body {background-color:#00CED1;} /* Define background color of body element as turquoise */
</style><!-- End of CSS style block for print media -->
</head><!-- End of document header -->
<body><!-- Start of document body -->
<h1>w3resource</h1><!-- Heading 1 element with the text "w3resource" -->
<p><a href="http://localhost/html-css-exercise/basic/solution/try-style-media-answer.html" target="_blank">Click here</a> to open this page in a new window (without the tryit part) <!-- Paragraph element with a link -->
</body><!-- End of document body -->
</html><!-- End of HTML document -->

Explanation:

This HTML code defines a webpage with a heading, a paragraph, and some CSS styles.
Inside the <head> section, two CSS style blocks are defined.
The first CSS style block contains styles for screen media (default), setting the color of <h1> elements to dark blue, the color of <p> elements to white, and the background color of the body to light blue.
The second CSS style block contains styles for print media, setting the color of <h1> elements to light blue, the color of <p> elements to sky blue, and the background color of the body to turquoise.
The media="print" attribute in the second <style> tag specifies that the contained styles are intended for print media only.
As a result, when the webpage is printed, the styles defined in the second <style> tag will be applied, while the styles defined in the first <style> tag will be applied for viewing the webpage on screen.

Live Demo:

See the Pen style-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page