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

16. For inline images within the main section, create a style rule to: a) fl oat the image on
the right; b) set the margin to 15 pixels; c) set the width to 350 pixels; and d) set the
radius of the bottom-left corner to 350 pixels (use progressive enhancement to sup-
port the Mozilla and WebKit browser extensions).
17. Alice has included six coupons in the home page that have been nested within
div elements belonging to the coupon class. For each coupon div element: a) add
a 5-pixel dashed black border; b) fl oat the coupons on the left; c) set the width to
170 pixels and the height to 150 pixels; and d) set the top and bottom margins to
20 pixels, and the left and right margins to 10 pixels.
18. To the style rule for the coupons, add style properties to create the following two
background images: a) place the slice.png image in the center of the coupon without
tiling; and b) place the notice.png image in the bottom-right corner of the coupon
without tiling. Set the background color of the coupon to white.
19. For h1 headings within the coupons, add a style rule to: a) set the text color to white
on a background with the color value (192, 0, 0); b) set the font size to 16 pixels and
the kerning to 2 pixels; c) center the text; d) set the height to 25 pixels; and e) display
the text in small caps.
20. For paragraphs within the coupons, create a style rule to: a) set the font size to
14 pixels; b) center the text; and c) set the margin to 5 pixels.
21. Alice has placed interesting tidbits about pizza in an aside element. Float the aside
element on the left with a width of 200 pixels.
22. For h1 headings within the aside element, create a style rule to: a) set the text color
to the value (192, 0, 0); b) set the font size to 20 pixels and the kerning to 2 pixels;
c) set the font weight to normal; and d) center the text of the headings.
23. For list items within the aside element, create a style rule to: a) set the background
color to the value (255, 135, 135); b) add round corners with a 5-pixel radius;
c) set the text color to black; d) remove the list style maker; and e) set the margin to
10 pixels and the padding to 5 pixels.
24. Display the footer element when the left margin is clear, and set the size of the left
margin to 200 pixels.
25. For the address element within the footer element, create a style rule to: a) add
a 1-pixel solid red border to the top of the element; b) change the text color to red;
c) set the font size to 10 pixels, set the font style to normal, and center the address
text; and d) set the top margin to 25 pixels and the bottom padding to 20 pixels.
26. Add style comments throughout your style sheet to document your work and then
save your changes.
27. Open the redball.htm fi le in your Web browser and verify that the design and layout
resemble that shown in Figure 4-79.
28. Submit your completed fi les to your instructor, in either printed or electronic form,
as requested.