
285
Building Style Sheet Web Pages
7
The final step is to add a heading that appears only in the print version of the page. To accomplish this, you’ll
need to hide the content in the screen-oriented style sheet.
1. Place your cursor on the first image on the page and switch to Code view.
2. Press left-arrow to move the cursor in front of the <img> tag and enter the following code
<h1>Relative Realty</h1>; return to Design view when you’re done.
3. Place your cursor in the new <h1> tag and, from the Property inspector’s Class list, choose
printOnly.
4. In the Style Rendering toolbar, choose Switch To Render Screen Media Type, or choose
View
➪ Style Rendering ➪ Screen Media Type.
You’ll notice that the heading—redundant in screen mode—is also visible here. You can change
that by adding a style.
5. In the CSS Styles panel, select the primary.css entry and click New CSS Rule.
6. In the New CSS Rule dialog box, switch the Selector Type set to Class and change the Name field
to .printOnly; click OK when you’re ready.
7. Switch to the Block category and, from the Display list, choose None; click OK to confirm the
change and close the dialog box.
8. Select File ➪ Save All to store all the changes.
You can easily see the differences by switching between the Screen and Print icons on the Style
Rendering toolbar.
Styles and Their Attributes
After you’ve selected a type and name for a ...