HTML and CSS Reference
In-Depth Information
6. Save your changes to the style sheet, and then open the
young.htm
file in your Web
browser. Verify that the page resembles that shown in Figure AC1-1, and that the text
of the home page wraps around the graphic files that constitute the student image.
7. Go to the
lessons.htm
file in your text editor. This file contains a short summary of
the music lessons offered by Young Notes. Figure AC1-2 shows a preview of the
completed Web page you'll create for Brenda.
Figure Ac1-2
Young Notes lessons page
8. Near the bottom of the file, directly above the last paragraph, insert a Web table con-
taining the following elements:
a. A table heading row group consisting of one row with three heading cells con-
taining the text
Lesson
,
Per term
, and
Per Year
.
b. A table body row group containing three rows of table data cells with the values
shown in Figure AC1-2.
c. A column group containing one column element belonging to the
firstCol
class
and another column element belonging to the
feeColumns
class. The
feeColumns
column group should span two columns in the Web table.
9. Link the
lessons.htm
file to the
tstyles.css
style sheet and then close the file, saving
your changes.
10. Go to the
tstyles.css
file in your text editor. Add the following styles to the style sheet:
a. Set the font size of the
table
element to
14 pixels
. Add a
10-pixel outset
border with
the color value
(68, 76, 169)
around the table. Set the table borders to
collapse
in
case of conflicts with other borders. Center the table horizontally in the page by set-
ting the top and bottom margins to
10 pixels
, and the left and right margins to
auto
.
Set the width of the table to
400 pixels
.
