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

Last update on February 26 2020 08:07:03 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to specify what media/device the media resource is optimized for</title>
<style>
h1 {color:#0000CD;}
p {color:#FFFFFF;}
body {background-color:#6495ED;}
</style>
<style media="print">
h1 {color:#1E90FF;}
p {color:#00BFFF;}
body {background-color:#00CED1;}
</style>
</head>
<body>
<h1>w3resource</h1>
<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)
</body>
</html>

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