HTML and CSS Reference
In-Depth Information
Complete the following:
1. Use your text editor to open the dhometxt.htm and dtabletxt.css fi les from the
tutorial.05\case3 folder. Enter your name and the date in the comment section of
each fi le. Save the fi les as dhome.htm and dtable.css , respectively.
2. Go to the dhome.htm fi le in your text editor. Create links to the dome.css and
dtable.css style sheets.
3. Scroll down to the section element. Above the paragraphs within that element,
insert a table with the class name domeSpecs . Add a table summary with the text A
table describing six dome models sold by dHome, Inc. and add the table caption
Building Models .
4. Create a column group containing three col elements with class names of
fi rstColumn , middleColumns , and lastColumn . The middleColumns col element
should span two columns in the table.
5. Create a table header row group containing a single table row with four table head-
ing cells. The cells should contain the headings Model , Total Sq. Ft. , Sphere Size ,
and Price .
6. Insert a table footer row group containing a single row and three data cells. The fi rst
and third cells should be left blank. The middle cell should contain the text Call us
about custom pricing! and should span two columns.
7. Create a table body row group consisting of six table rows with four cells each. Insert
the model, square feet, sphere size, and price values from Figure 5-56.
8. Save your changes to the dhome.htm fi le and then go to the dtable.css fi le in your
text editor.
9. Create a style for the domeSpecs table that: a) sets the font size to 16 pixels; b) sets
the bottom and left margins to 20 pixels; c) fl oats the table on the right; and d) col-
lapses the border.
10. Add code to the style rule from the previous step to display the fi le tableback.png as
the table background aligned with the bottom-right corner without tiling. Set the size
of the background image to cover the table.
11. For every data cell in the domeSpecs table, set the top and bottom padding to 0 pix-
els and the left and right padding to 5 pixels.
12. Create a style rule for the table caption to: a) set the font size to 18 pixels and the
kerning to 5 pixels; b) center the caption text above the table; and c) set the bottom
margin to 10 pixels.
13. For the table header row group, create a style rule to: a) display a 2-pixel solid gray
bottom border; and b) display the image fi le top.jpg tiled horizontally across the top
of the row group.
14. Set the height of the table row in the header row group to 40 pixels.
15. For heading cells within the header row group: a) set the top/bottom padding to
0 pixels and the left/right padding to 5 pixels; and b) set the kerning to 2 pixels.
16. Olivia wants a graphic image used for the top-left and top-right corners of the table
header row group. Use the first-of-type pseudo-class to set the background
image of the fi rst heading cell in the header row group, placing the image fi le
topleft.jpg in the top-left corner of the cell with no tiling. In the same way, use the
last-of-type pseudo-class to place the image fi le topright.jpg as the background
image for the last heading cell in the table header row group, positioning the image
in the top-right corner of the cell with no tiling.
17. Create a style rule for the table footer row group that: a) adds a 2-pixel solid gray top
border; b) centers the text of the row group; and c) adds the background image fi le
bottom.jpg repeated horizontally along the bottom of the row group.
18. Set the height of the table rows within the table footer row group to 40 pixels.
Search WWH ::

Custom Search