HTML and CSS Reference
To view the layout structure:
1. Return to the cp_styles.css file in your text editor.
2. At the bottom of the file, insert the following style rule:
outline: 1px solid red;
3. Save your changes to the file and then reload cycle.htm in your Web browser.
As shown in Figure 4-47, each element in the page is outlined in red, showing its
exact width, height, and location under your current design.
Outlining the page layout
4. Return to the cp_styles.css file in your text editor and remove the style rule you
created in Step 2. Save your changes to the file.
Putting It All Together
The next part of the Cycle Pathology page is the article written by Kathy Rawlings about
cycling on Rim Rock Drive. The article is contained within a section element with the
id story along with a fi gure box showing a cyclist on Rim Rock Drive. Dan wants the
story section aligned with the president's message, with the article and the fi gure box
placed side-by-side. To format these elements, you'll use all of the CSS tools you've
learned about so far.
First, you'll edit the reset style sheet to re-display the story section and its contents;
then you'll set the location of these elements in the Web page.
To display the story section:
1. Return to the cp_reset.css file in your text editor and then go to the style rule at the
bottom of the file that hides page elements. Remove the selector #story and the
comma that follows it from the style rule, and then save your changes to the file.
2. Return to the cp_styles.css file in your style sheet.