HTML and CSS Reference
In-Depth Information
Finally, in default.html add a sibling DIV element for each print scenario you intend to support.
Here's how:
<div id="main">
<div id="print-template1">
<div id="print-template2">
The user interface goes in the main DIV; content you want to be able to print goes in the other DIV
elements. You now need to ensure that when the application is running normally and not printing,
the print sections are hidden. Likewise, you want to hide the application UI content and display the
appropriate content when the application is going to print.
The print media
Web browsers have supported screen and print media for a long time. When you author an HTML
page, you can link distinct CSS style sheets for screen and print using the media attribute on the
STYLE and LINK elements. For example, the following code links the screen.css file when the page
is being displayed and automatically (and silently) switches to the print.css when the page is being
<link rel="stylesheet" href="screen.css" media="screen" />
<link rel="stylesheet" href="print.css" media="print" />
If you don't specify the media attribute, it is assumed to have a value of all , meaning that the style
sheet will be applied in all cases.
In the current exercise, you want to hide the print-template1 and print-template2 sections in screen
mode; similarly, you want to hide the main section when the page is being printed. You can easily
achieve this using the media attribute.
To keep it as simple as possible, you'll work with the STYLE element. The STYLE element allows you
to insert style information inline rather than referencing it from an external file.
<style media="print">
#main {
display: none;
Search WWH ::

Custom Search