Demonstrating the media attribute of CSS style tag
And of course there are various ways of using CSS aside from defining an inline style tag. But for the sake if this example and simplicity, I'll try to demonstrate the media attribute's usage using the style tag.
The media attribute has 7 kinds. Recently, I've been able to use two of the most prominent ones which are screen and print. Now, I had a requirement to print sections based on what is checked on certain checkboxes. I won't be using checkboxes for this example, but just plain old divs with a style attribute.
[code Language="css"]
<html>
<head>
<style TYPE="text/css" MEDIA="print">
.ColoredDiv{
color: red;
font-weight: bold;
}
.Hidden{
display: none;
}
</style>
<script>
function printVisible(){
//print
window.print();
}
</script>
</head>
<body>
<div id="content1" class="Hidden">
Content 1 Should not be printed
</div>
<div id="content2" class="ColoredDiv">
Content 2 Should be printed
</div>
<div id="content3" class="Hidden">
Should not be printed
</div>
<input type="button" value="print" onclick="BLOCKED SCRIPTprintVisible();" class="Hidden">
</body>
</html>
[/code]
Now try printing it! :)