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
.
Tip
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.
■
Caution
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"
>
2.
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.
