HTML5: How to specify what media/device the media resource is optimized for?
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 |
What is the difficulty level of this exercise?
- New Content published on w3resource:
- Scala Programming Exercises, Practice, Solution
- Python Itertools exercises
- Python Numpy exercises
- Python GeoPy Package exercises
- Python Pandas exercises
- Python nltk exercises
- Python BeautifulSoup exercises
- Form Template
- Composer - PHP Package Manager
- PHPUnit - PHP Testing
- Laravel - PHP Framework
- Angular - JavaScript Framework
- React - JavaScript Library
- Vue - JavaScript Framework
- Jest - JavaScript Testing Framework