Unit 4. Review "A" Red Ball Pizza

Unit 4. Review "A" Red Ball Pizza

Tutorial 4 Review - A

Red Ball Pizza

1.    Open the pizzatxt.css and redballtxt.htm files from your student data files.  Enter your name and the date in the comment section of each files.  Save the files as pizza.css and redball.htm respectively. 

2.    Return to the redball.htm  file and link the pizza.css stylesheet.   Save your changes.

3.    Go to the pizza.css file and create a style rule to display the header, section, aside, footer, and nav elements as blocks. Hint: The style rule should be written as follows:  header, section, aside, footer, nav * {}

4.    Set the default padding and margin size of the body to 0 pixels. Hint: The style rule should be written as follows: body * {}

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 pixels; 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 file as the background image, placing the image file 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 it’s 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 float 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 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;) d) remove the text underlining.  I 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) float it on the left only when the left margin is clear; b) set the width to 200 pixels.

12.For list items with 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) float the element on the left; and c) set the width to 600 pixels.

15.For the paragraph within the main section, set the font size to 20 pixels and the margin to 15 pixels.  Hint: The style rule should be written as follows: 

#main > p{ 

}

16.For inline images within the main section, create a style rule to: a) float 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 the progressive enhancement to support the Mozilla and Webkit browser extensions.  Hint: The style rule should be written as follows: 

#main > img{

}

17.There are 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) float the coupons on the left; c) set the width to 170 pixels and the height to 150 pixels; d) set the top and bottom margins to 20 pixels, and the left and right margins to 10 pixels.

18. Also, 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; 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.Create a style rule for the paragraphs of the coupons to: a) set the font size to 14 pixels; b) center the text; c) set the margin to 5 pixels.

21.There are interesting tidbits about pizza in an aside element.  Float the aside element on the left with a width of 200 pixels.

22.For the h1 headings of 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 the list items of 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 marker; 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 of 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.Save your changes and open the redball.htm file in your Web browser and verify that the design and layout resemble the picture provided.