1. To use the following style sheet to visually format your html file you need to include the link element within the head element at the beginning of the file: <link rel="stylesheet" type="text/css" href="web.css" /> 
    p {
  font-family: arial, sans-serif;
  font-size: 80%;
  text-indent: 10px;
}

h1 {
  font-family: arial;
  color: green;
}

h1 em {
  color: orange;
}

 section inherits its Arial font from the general h1 tag 
h1#section {
  text-align: center;
  color: red;
}

ol.mini-roman {
  list-style-type: lower-roman;
}

body {
   an alternative for the color is #50ff80 
  background-color: rgb(80,255,128)
}

  2. web.html: You can view the page source to see how I associated the style rules with the various elements in the web.html file.

  3. <p style="text-align:center; font-weight: bold">

  4. A couple things to note about the following solution:
    1. The td and th classes, such as footer and description, inherit the style attributes from the th and td style declarations. In other words, they augment the set of attributes they receive from the more general declarations.
    2. The stylesheet names for some attributes are different than the inline attribute names. For example, the inline name for the background attribute is bgcolor but the style sheet name is background-color. The same is true for the text-align attribute, which is named align when it is used in-line.
    3. In order to get a border you have to specify not only the width of the border but also the value "solid".
    4. In order to get ruled lines between table entries you need to specify a border attribute for td.
    5. For the Sales Tax and Total rows I was able to combine the style attributes for the footer and total classes by listing both class names in the class attribute for the "total" column.
    <head> <style> th { background-color: red; } td { padding-left: 1em; text-indent: -1em; border: solid 1px } td.footer { background-color: #d0d0d0; } th.description,td.description { text-align: left; width: 75% } th.qty,td.qty { text-align: center; width: 5% } th.price,td.price { text-align: right; width: 10% } th.total,td.total { text-align: right; width: 10% } table { border: solid 1px; border-collapse: collapse } </style> </head> <p> <table> <tr> <th class="description"><b>Description</b></td> <th class="qty"><b>Qty</b></td> <th class="price"><b>Price</b></td> <th class="total"><b>Total</b></td> </tr> <tr> <td class="description"> GE 7.0 Megapixel A730 Digital Camera with Amazing Picture Taking Ability + Extra Memory to Accommodate Your Really Crummy Photos </td> <td class="qty"> 2 </td> <td class="price"> 99.99 </td> <td class="total"> 199.98 </td> </tr> <tr> <td class="description"> Anti-Burst Bender Yoga Ball </td> <td class="qty"> 5 </td> <td class="price"> 19.80 </td> <td class="total"> 99.00 </td> </tr> <tr> <td class="footer" colspan="3"> <b>Sales Tax</b> </td> <td class="footer total"> 10.00 </td> </tr> <tr> <td class="footer" colspan="3"> <b>Total</b> </td> <td class="footer total"> 308.98 </td> </tr> </table>
  5. I have commented the following files so that you can see the design decisions that I made in organizing the content and in formatting the content. There are a couple design principles that I did want to point out:

    1. I created blocks to enclose related content, even if that content was not specially formatted. This would allow me to specially format the content later if I so desired.
    2. I used borders and background colors a lot during the testing of my design in order to get the formatting rules right. The borders and background colors often showed me that the widths of my elements were not as I expected them to be, which is why my formatting was often messed up.
    3. I used header elements (h1-h3) for labeling the contents of blocks, rather than the unlabeled text that Dr. Berry used. Dr. Berry could not use header elements because he needed special formatting for the labels and html does not allow a designer to easily change the visual attributes of headers. CSS does allow the designer to easily change the visual attributes of headers, so it is good to use header elements in the html source to identify the labels.
    4. I did not name my id selectors after their visual decorations, but instead after their content. For example, I named the span element "date" rather than "redtext" and the exam element "exam1-content" rather than "yellowbox". It may seem natural to name selectors after their visual decorations, but that will mess things up if you later change the visual decorations. It is better to name the selectors after their content.