HTML and CSS Reference
In-Depth Information
2. Return to the
sudoku.htm
fi le in your text editor. Add links to the
jpf.css
and
stable.
css
style sheets.
3. Scroll down to the
section
element. Directly below the opening
<section>
tag,
insert a
table
element that will be used to display the Sudoku puzzle. Give the
table
element the class name
spuzzle
.
4. Add a caption to the spuzzle table containing the text
Sudoku
.
5. Create a table head row group containing a single row. The row should display
10 heading cells. The fi rst heading cell should be blank and the remaining nine cells
should display the digits from 1 to 9.
6. Create the table body row group containing nine table rows with the fi rst cell in each
row containing a table heading cell displaying the letters A through I.
7. After the initial table heading cell in the fi rst, fourth, and seventh rows, insert three
table data cells spanning three rows and three columns each. Altogether, these nine
data cells will store the nine 3×3 boxes that are part of the Sudoku puzzle.
8. In the fi rst row of the table body, put the three table data cells in the greenBox,
goldBox, and greenBox classes, respectively. In the fourth row, the three data cells
belong to the goldBox, greenBox, and goldBox classes. In the seventh row, the three
data cells belong to the greenBox, goldBox, and greenBox classes.
9. Go to each of the nine table data cells you created in the last two steps. Within
each data cell, insert a nested table belonging to the subTable class. Within each
nested table, insert three rows and three columns of data cells. Enter the digits from
Figure 5-54 in the appropriate table cells. Where there is no digit, leave the table
cell empty.
10. Save your changes to the fi le, and then go to the
stable.css
style sheet in your text
editor.
11. Create a style rule to collapse the borders of the spuzzle and subTable tables.
12. Add a 5-pixel outset gray border to the table data cells within the spuzzle table.
13. Set the font size of table header cells within the spuzzle table to 8 pixels and the
font color to gray.
14. Set the height of table header cells within the table body row group of the spuzzle
table to 40 pixels.
15. For table data cells within the subTable table, add the following styles: a) set the font
size to 20 pixels and the font color to blue; b) set the width and height to 40 pixels
and center the cell text both horizontally and vertically; and c) add a 1-pixel solid
black border around the cell.
16. For table data cells nested within the goldBox class of table data cells, display the
background image fi le
gold.jpg
centered within the cell and not tiled. (Hint: Use
background position values of 50% for both the horizontal and vertical directions.)
17. For table data cells nested within the greenBox class of data cells, set the back-
ground image to the
green.jpg
fi le, once again centered within the cell without
tiling.
18. Add descriptive comments throughout your style sheet to document your work.
19. Save your changes to the fi le and then reload
sudoku.htm
in your Web browser.
Verify that the layout and design of the Sudoku table resemble that shown in
Figure 5-54.
20. Submit your completed fi les to your instructor, in either printed or electronic form,
as requested.
