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.
