RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.w3resource.com/html-css-exercise/basic/style-media-answer.php below:

Website Navigation

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

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)

Go to Exercise page

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

Go to Exercise page

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4