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.
No comments:
Post a Comment