HTML and CSS Reference
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
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
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
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.