HTML and CSS Reference
The Cycle Pathology Web page has the following main parts:
• the page header, including the Cycle Pathology logo
• a navigation list pointing to main topical areas on the site
• a section containing a message from the club president, Dan Atwood
• a second navigation list containing links to the club's newsletter, sponsored events, and
• a section containing an article by Kathy Rawlings about cycling in the Colorado
National Monument and a fi gure box of a cyclist on Rim Rock Drive
• an aside describing upcoming tours and events
• a footer containing the Cycle Pathology address
Dan has sketched out how he would like each of these sections arranged in the page.
His sketch is shown in Figure 4-2.
Cycle Pathology layout design
About Cycle Pathology
From the President's Desk
Riding the Rim
Cycle Pathology 100 Redstone Drive Grand Junction, CO 81501 (970) 555-8944
Dan wants the fi rst navigation list placed in a horizontal bar at the top of the page,
and the second list moved to a vertical column at the page's right margin. The president's
message should appear in a rounded box at the top of the page, with Kathy Rawlings'
article set below it and the image of Rim Rock Drive placed to the right. The sidebar
describing upcoming club events should be moved to the page's lower-left corner, and
the footer should be placed at the bottom of the page. Dan also wants to add images of
himself, Kathy Rawlings, and another cyclist in the background of different sections of
To create this type of layout, you'll need to work with the display properties of the
different page elements. You'll start by learning how browsers arrange different types of
elements, and how you can use CSS to change those default display styles.
The display style
Most page elements are displayed in one of two ways. Blocks , such as paragraphs or
block quotes, occupy a defi ned rectangular area within a page. Inline elements , on the
other hand, such as a sentence within a paragraph or a citation within a block quote,