HTML and CSS Reference
In-Depth Information
Complete the following:
1. In your text editor, open the
caltxt.css
and
febtxt.htm
fi les from the tutorial.05\case2
folder. Enter
your name
and
the date
in the comment section of each fi le. Save the
fi les as
calendar.css
and
feb.htm
, respectively.
2. Go to the
feb.htm
fi le in your text editor. Create links to the
calendar.css
and
ccc.css
style sheets.
3. Scroll down to the events
section
element. Within the element, insert a table with
the class name
calendar
. Add the table caption
Events in February at the CCC
to the
calendar.
4. Create a column group for the calendar consisting of two
col
elements. The fi rst
col
element should belong to the weekdays class and span fi ve columns. The second
col
element should belong to the weekends class and span two columns.
5. Create a table header row group consisting of one row of table headings displaying
the three-letter abbreviations for the days of the week, starting with
Sun
and ending
with
Sat
.
6. Create a table body row group containing the days in the month of February. The row
group should contain fi ve rows and seven columns of table data cells. There are no
spanning cells in any of the rows or columns.
7. Each table data cell should have the following content:
• The day of the month should be marked as an
h3
heading (refer to Figure 5-55
for the starting and ending days in the calendar).
• On the days when there is a CCC event, enter the event information as a defi ni-
tion list with the name of the event marked as a
dt
element, and the time and
price of the event each marked with a
dd
element.
8. Save your changes to the fi le and then go to the
calendar.css
fi le in your text editor.
Create a style rule for the calendar table to: a) create separate borders for the differ-
ent parts of the table with a 5-pixel space between the borders; b) set the font size
to 8 pixels; c) set the top margin to 20 pixels, the bottom margin to 5 pixels, and the
left and right margins to
auto;
d) set the padding space to 40 pixels; and e) set the
width to 650 pixels.
9. In the style rule you created in the previous step, add a style that specifi es multiple
background images for the calendar table in the following order:
• the
topleft.jpg
image in the top-left corner of the table with no tiling
• the
topright.jpg
image in the top-right corner with no tiling
• the
bottomleft.jpg
image in the bottom-left corner with no tiling
• the
bottomright.jpg
image in the bottom-right corner with no tiling
• the
top.jpg
image in the top-left corner, tiled only in the horizontal direction
• the
left.jpg
image in the top-left corner, tiled only in the vertical direction
• the
right.jpg
image in the top-right corner, tiled only in the vertical direction
• the
bottom.jpg
image in the bottom-left corner, tiled only in the horizontal
direction
10. Create a style rule to center the table caption along the top of the calendar table
and do the following: a) set the bottom padding to 10 pixels; b) set the font size to
16 pixels; c) set the kerning to 3 pixels; and d) set the width to 650 pixels.
