Creating Page Layouts with CSS - HTML, CSS, and Dynamic HTML - page 229

To hide the different sections of the page:

◗

1. At the bottom of the cp_reset.css style sheet, enter the following style rule:

/* Temporarily hide the page sections */

nav.horizontalNAV, #president, nav.verticalNAV,
#story, header, aside, footer {
display: none;
}
Figure 4-5 shows the complete cp_reset.css style sheet.

Figure 4-5 Initial reset style sheet

displays all l structural
elements as blocks

sets the d efaults for
the Web site

hides the main
sections of the Cycle
Pathology home page

◗

2. Save your changes to the file and then return to the cycle.htm file in your text editor.
◗

3. Directly above the closing </head> tag, insert the following link to the reset
style sheet:

<link href=”cp_reset.css” rel=”stylesheet” />

◗

4. Save your changes to the file and then reload the cycle.htm file in your Web
browser. Verify that no content is displayed in the browser window.

With the browser window now clear, you are ready to design. You'll start by working
on the background for the page.

You also can hide
objects using the
visibility: hidden;
property, which hides
the element content but
leaves the element still
occupying the same space
in the page.

Designing the Background
In the last tutorial, you learned how to set the background color using the
background-color property. CSS also supports background images using

background-image: url( url );