Review Questions 3

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.
   
   The property for underline is text-decoration not font-style.
   The property font-family should relaly specify a generic font for compatibility.
   Corrected statement:
   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!
   
   In my browser, IE 6.0 on Windows ME at 800x600 these headings are equal:
   

   This is heading 1 in 30pt

   This is heading 1 in 3em

   This is heading 2 in 22pt

   This is heading 2 in 2.2em

   This is heading 3 in 16pt

   This is heading 3 in 1.6em

   This is heading 4 in 12pt

   This is heading 4 in 1.2em

   
   
   
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?
   
   Text measured in pt is an absolute measure and may not display in every browser the same depending upon user settings etc. Text measured in em is relative and is more suited to liquid web design.
   
   
   
4. Rewrite the following code using shorthand properties: p { margin-bottom: 10em; margin-left: 15em; margin-right: 20em; margin-top: 5em; color: blue; }
   
   p { color: blue; margin: 5em 20em 10em 15em; }
   
   
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;
   }
   
   p{
   color: #cc0066;
   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;
   }