HTML and CSS Reference
In-Depth Information
The disadvantage with this approach is that it can be difficult to keep track of which rules you are overriding
in the print style sheet. There's also a danger that you might add a new style to the main style sheet and not
realize that it affects the way the page is printed.
if you decide to use the cascade for print styles, make sure you set the position property of positioned
elements to static . This returns them to the normal flow of the document and ensures they will print correctly.
if you don't want an element to be printed, set its display property to none .
Attaching Independent Style Sheets
By specifying the media attribute for each style sheet, the styles are applied only by the targeted devices. This
allows you to create a completely independent print style sheet. Attach the style sheets like this:
<link href="styles/main.css" rel="stylesheet" media="screen" >
<link href="styles/print.css" rel="stylesheet" media="print" >
This gives you a blank canvas on which to create your print styles.
Setting the media attribute to all has the same effect as omitting the attribute.
exerCise: Creating a print style sheet
in this exercise, you'll create a print style sheet for the version of the Mediterranean Destinations page with
a horizontal menu from Chapter 10 . The simple way to create a print style sheet is to copy the existing style
rules to a new file, and then edit them.
Use as your starting point horizontal_begin.html and styles/horizontal.css in the ch16 folder. The finished
files are horizontal_end.html and styles/print_end.css. no changes are made to horizontal.css.
1. Add the media attribute to the <link> tag that attaches the existing style sheet, and
set its value to screen :
<link href="styles/horizontal.css" rel="stylesheet" media="screen" >
Save the page, load it into a browser, and select the browser's Print Preview . The
page is completely unstyled because the media attribute specifies that the styles are
only for visual browsers. if you're in a hurry, this is a simple way of ensuring that all
the content is printed. But it looks very bland, as Figure 16-3 shows.
Search WWH ::

Custom Search