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

2. Return to the redball.htm fi le in your text editor. Take some time to review the con-
tent and structure of the document, and then link the fi le to the pizza.css style sheet.
Close the fi le, saving your changes.
3. Go to the pizza.css fi le in your text editor. Create a style rule to display the header ,
section , aside , footer , and nav elements as blocks.
4. Set the default padding and margin size to 0 pixels.
5. Create a style for the body element to: a) set the background color to red; and b) set
the font family to Verdana, Geneva, or sans-serif.
6. The entire content of the page has been enclosed in a div container element with
the id container . Create a style rule for this container to: a) set the width to 1000 pix-
els; b) center the container in the browser window by setting the top/bottom margins
to 0 pixels and the left/right margins to auto ; c) display a 1-pixel solid black border
on the left and right edges; and d) set the background color to white and display the
redbar.png image fi le as the background image, placing the image fi le in the top-left
corner of the container and tiling it in the vertical direction only.
7. Change the background color of the header element to white and set its height to
100 pixels.
8. Create a style rule for the horizontal navigation list to: a) set the height to 70 pixels
and the width to 100%; and b) set the background color to white.
9. For each list item within the horizontal navigation list, create a style rule to: a) set
the background color to white; b) set the font size to 16 pixels, the height and the
line height to 50 pixels, and the width to 180 pixels; c) display the item as a block
and fl oat it on the left; d) set the left and right margins to 5 pixels; and e) horizontally
center the contents.
10. For each hypertext link within a list item in the horizontal navigation list, create a
style rule to: a) display the link as a block; b) set the background color to red and the
text color to white; c) create elongated corners with a horizontal radius of 30 pixels
and a vertical radius of 25 pixels (use progressive enhancement to support browser
extensions); and d) remove the text underlining. If a user hovers a mouse pointer
over these links, change the background color to the value (255, 101, 101) and the
text color to black.
11. Create a style rule for the vertical navigation list to: a) fl oat it on the left only when
the left margin is clear; and b) set the width to 200 pixels.
12. For list items within the vertical navigation list, create a style rule to: a) remove the
list item marker; b) indent the text 20 pixels; and c) set the top and bottom margins
to 20 pixels.
13. For hypertext links within the vertical navigation list, set the text color to white and
remove the text underlining. When a user hovers the mouse pointer over these links,
change the text color to black.
14. The main content of the Web page is contained in a section element with the
id main . Create a style rule for this element to: a) change the background color to
the value (255, 211, 211); b) fl oat the element on the left; and c) set the width to
600 pixels.
15. For paragraphs that are direct children of the main section, set the font size to
20 pixels and the margin to 15 pixels.