Web Design
Table of Contents
by Arnold Kling
Assignment for CSS

Here is some HTML code. Create a file in your htdocs directory and call it assign1.html. Then copy this code into that file.

<html>
<head>
<link rel = "stylesheet" href = "styles/assign1.css" type = "text/css">
</head>
<body>
<span class = "heading">Fantasy Baseball News</span>
</div>
<div class = "firstcolumn">
<p>

This year's Freddie Mac Fantasy Baseball season is over. The winners are shown in the table to the right. The Pat/Arnold team made a great comeback at the end to finish third.
</p>

</div>
<div class = "secondcolumn">
<span class = "tableheading">Final Standings</span>
<p>
<table class = "standingstable">
<tr> <td class = "standingslabel">
Team</td>
<td class = "standingslabel">
Points</td>
</tr> <tr> <td class = "standingsrowA">
Dave Y</td>
<td class = "standingsrowA">
88</td>
</tr> <tr> <td class = "standingsrowB">
Greg P</td>
<td class = "standingsrowB">
84</td>
</tr> <tr> <td class = "standingsrowA">
Pat/Arnold</td>
<td class = "standingsrowA">
80</td>
</tr> <tr> <td class = "standingsrowB">
Steve/Vic</td>
<td class = "standingsrowB">
78</td>
</tr>
</table>
</div>
</body> </html>

Now, in your styles subdirectory create a style sheet called assign1.css so that:

  1. The heading "fantasy baseball news" shows up centered (with respect to left and right), has a font face of Verdana, and is 180 percent of normal height.
  2. The first column shows up as a column on the left of the page, taking up the left 40 percent of the page, with a margin of 10 percent to its right. That is, the text plus the margin take up 50 percent.
  3. The second column shows up as a column on the right of the page, taking up 50 percent of the page.
  4. The table heading "final standings" shows up as a font face Arial, centered in the column, with a height of 150 percent of normal height.
  5. The standings table has a thick black border around it.
  6. The standings labels have thick black borders around them, and the text is bold.
  7. The standingsrowA elements have thin black borders around them, a yellow background, and red text.
  8. The standingsrowB elements have thin black bordes around them, a red background, and yellow text.