Introduction to CSS - Week 2 Review Questions
Paula Payne

1. Please validate the following code:
   
   body {
   font-family: Arial, Helvetica;
   font-style: underline;
   margin-left: 6px;
   margin-right: 5px;
   text-indent: 9px;
   }
   
   Post your results and offer an explanation of what - if anything - needs to be corrected.
   
   Validation Results from http://jigsaw.w3.org/css-validator/:
   
   Errors
   URI : file://localhost/TextArea
   Line: 3 Context : body
   Invalid number : font-style underline is not a font-style value : underline
   
   Warnings
   URI : file://localhost/TextArea
   Line : 2 font-family: You are encouraged to offer a generic family as a last alternative
   
   Valid CSS informations
   body {
   font-family : Arial, Helvetica;
   margin-left : 6px;
   margin-right : 5px;
   text-indent : 9px;
   }
   
   Corrected code:
   
   body {
   font-family: Arial, Helvetica, sans-serif;
   text-decoration : underline;
   margin-left: 6px;
   margin-right: 5px;
   text-indent: 9px;
   }
   
   
   
2. Convert the following STYLE definitions so that the headings look similar using em for the unit of measure instead of pt.
   
   <style type="text/css">
   <!--
   h1, h2, h3 {
   font-family: Arial, Helvetica, sans-serif;
   font-style: italic;
   color: #000080;
   background: #00ff00;
   text-decoration: underline;
   }
   h1 { font-size: 30pt; }
   h2 { font-size: 22pt; }
   h3 { font-size: 16pt; }
   h4 { font-size: 12pt; }
   -->
   </style>
   
   * Please include the browser and platform you are using. For example: Netscape 6.2 on a Windows 98 based machine. If you know your screen resolution post that too. We will later compare results!
   
   Answer:
   
   IE6.0 on a Windows XP based maching with a screen resolution of 1280 x 1024
   Click here for page using both styles.
   
   <style type="text/css">
   <!--
   h1, h2, h3 {
   font-family: Arial, Helvetica, sans-serif;
   font-style: italic;
   color: #000080;
   background: #00ff00;
   text-decoration: underline;
   }
   h1 { font-size: 2.8em; }
   h2 { font-size: 1.7em; }
   h3 { font-size: 1.3em; }
   h4 { font-size: 1.0em; }
   -->
   </style>
   
   
   
3. Many people prefer to use pt as a unit of measure for font-size rather than em or percentage. What advantages or disadvantages can you see to using pt? What advantages or disadvantages can you see to using em?
   
   Answer:
   
   Points are standard typographical measures used by word processors for years. For me, this makes them more intuitive to use. However, since points are absolute length units they are only useful if the browser knows all the details of the monitor on which the page is being displayed, or the printer that will be used to print the page, or whatever user agent might be in use. Also, what might look good on a Windows monitor may appear too small on a Mac and be difficult to read.
   
   Ems are preferable to points when browser display is the primary focus for the web page. This is because ems are relative length units. Ems would not be useful if the primary output is a printer.
   
   
   
4. Rewrite the following code using shorthand properties:
   
   p {
   margin-bottom: 10em;
   margin-left: 15em;
   margin-right: 20em;
   margin-top: 5em;
   color: blue;
   }
   
   Answer:
   
   p {
   margin: 5em 20em 10em 15em;
   background-color: transparent;
   color: blue;
   }
   
   
   
5. Convert the following code from shorthand to longhand:
   
   p {
   color: #cc0066;
   font: italic small-caps bold 1em Arial, Helvetica, sans-serif;
   text-decoration: underline;
   text-indent: 10px;
   }
   
   Answer:
   
   p {
   color: #cc0066;
   background-color: transparent;
   font-style: italic;
   font-variant: small-caps;
   font-weight: bold;
   font-size: 1em;
   font-family: Arial, Helvetica, sans-serif;
   text-decoration: underline;
   text-indent: 10px;
   }