<style media="">
- Attribute of
- How To Use To Add CSS Style Rules To HTML Documents
- What does
<style media="">
do? - Identifies the device or media that the styles contained in a <style> are designed to be applied to. Allows CSS styles to be optimized for a variety of devices and media formats.
Attribute for <STYLE ...>
MEDIA
MEDIA
sets the media (screen, print, etc) that the style applies to. By default (i.e. if you don’t use MEDIA
at all), then the style applies to all types of media. MEDIA
is most handy for setting styles that apply to printing but not to the screen, and vice versa. MEDIA
works the same as <LINK MEDIA="...">
. For example, suppose that you wanted links to look as they would by default on the screen (usually blue or purple, and underlined), but you want them to look like any other text when printed. To do this you would create a style that applies only to printed media and set the text-decoration and color properties of links:
<STYLE TYPE="text/css" MEDIA="print"> <!-- a, a:link, a:visited { text-decoration:none; color:black; } --> </STYLE>
As often happens, style definitions can overlap, in this case the anchors inheriting from the navbar
class and keeping their blue color when printing, so we’ll override navbar
for our example:
<STYLE TYPE="text/css" MEDIA="print"> <!-- a, a:link, a:visited, .navbar a, .navbar a:link, .navbar a:visited { text-decoration:none; color:black; } --> </STYLE>
This example was applied to this page. The links on this page look normal on your screen. However if you print the page you’ll see that the links look like regular text (assuming your browser understands these style rules, which most visual browsers do). In the reverse case — applying styles only to the screen but not to the printed page — a popular choice is to create elements that are hidden on the screen but which appear when printed. For example, suppose you wanted to emphasize the copyrighted nature of your page when it is printed but hide the extra notice when on the screen. To do something like this, you would first create a style that only applies to the screen and which designates that a class named copyright
is not displayed:
<STYLE TYPE="text/css" MEDIA="screen"> <!-- .copyright { display:none; } --> </STYLE>
Then simply apply this class to an element and that element won’t appear on the screen but will when printed:
<DIV CLASS="copyright"> <HR> Copyright 2001 Idocs.com All rights reserved. <HR> </DIV>
Copyright 2001 Idocs.com All rights reserved.