H151 - Review Week 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.

    Error: "Invalid number : font-styleunderline is not a font-style value : underline"
    Warning: "font-family: You are encouraged to offer a generic family as a last alternative"
    The font-family declaration should read "Arial, Helvetica, sans-serif;"in case the reader does not have Arial or Helvetica installed on their computers
    Instead of font-style, it should be text-decoration, as font-style refers to italics or oblique, not underline or strikethrough.

  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, h4 {
     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 operating system you are using. For example: Netscape 7.1 in Windows XP. If you know your screen resolution post that too.

    1 - 2.5em; 2 - 1.8em; 3 - 1.3em; 4 - 1em;
    Using IE 6 on Windows 98SE (1024 x 768)

  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?

    Using em allows for elements to be drawn in proportion to the font size that is rendered by a reader's user agent. Since different fonts mean different sizes for em, which means that a page could be rendered in a different proportion than originally planned.
    Using pt allows for specific positioning and sizing of elements, since a point is an absolute value (1/72th of an inch). This makes pt especially useful for printed documents. Most people are also familiar with the measurement. However, since some OS's or user agents do not draw inches completely accurately, it could cause some fonts do be drawn too small for readability.

  4. Rewrite the following code using shorthand properties:
    p {
     margin-bottom: 10em;
     margin-left: 15em;
     margin-right: 20em;
     margin-top: 5em;
     color: blue;
     background: white;
    }

    p {margin: 5em 20em 10em 15em; color: blue; background: white;}

  5. Convert the following code from shorthand to longhand:
    p {  color: #cc0066;  background-color: #ffffff;  font: italic small-caps bold 1em Arial, Helvetica, sans-serif;  text-decoration: underline;  text-indent: 10px; }

    p {color: #cc0066; background-color: #ffffff; font-style:italic; font-weight:bold; font-size: 1em: font-family: Arial, Helvetica, sans-serif; font-variant:small-caps; text-decoration: underline; text-indent: 10px;}

Jennifer Griner