Week 1 Quiz - by Elizabeth Hightower

H152 - CSS Workshop: Week 1 Quiz

Posted: February 29, 2004

Here's a chance for you to practice some of the concepts covered in week one.  Work on these questions; post any questions you have in the Week One Practice Quiz discussion area; and if you feel so inclined, post your answers to the practice quiz in the same discussion area.  I will post my answers to this quiz on Thursday. Here ya go:

1. Given the following style declarations, what is the width (from the outside edge of the left margin to the outside of the right margin) of the <div> in standards/strict mode?  And what is the width of the <div>'s content area?
   
   div {
height: 200px;
width: 400px;
margin: 10px 20px 30px 40px;
padding: 10px 20px 30px;
border: 1px solid red;
}
   
   

Answer: 400=20+40+20+20+1+1=502



2. How will IE6/Win render/handle the text in the following paragraph element (a) in standards mode and (b) in quirks mode?  State the color and background-color that will be rendered in both modes.
   
   body { color: blue; background: yellow; }
p { color: ff0000; background: white; }
   
   

Quirks Mode, the text is red, the backgound yellow, see this page.
Standards Mode, the text is blue, the background is yellow, see this page.

3. Tell what - if anything - is wrong with the following styles:
   
   
   1. p { font: arial, verdana, sans-serif; }
      
      

      When using the shorthand for font, font-size and font-family in that order must always be present in a font declaration.

      
      
   2. div { font-size: 12px; line-height: 1.5; }
      
      

      No problem found.

      
      
   3. em { font-style: italics; }



      Should be "italic".

      

   4. body { color: #000; background: #ffffff; }
      
      

      No problem found.

      
      
   5. body { color: transparent; background-color: orange; }
      
      

      Transparent is not a valid color. (Cascading Style Sheets - The Definitive Guide pg. 155)

      
      
   6. body { color: orange; background-color: transparent; }
      
      

      Orange is not a valid Named Color (Cascading Style Sheets - The Definitive Guide pg. 62)

      
      
   7. p { font: 1em/1.5em Times New Roman, Times; }
      
      

      Need quotes around font names with spaces between the words. Also, there is no generic font family declared. Needs "Serif" added at the end.

      
      
   8. span { border-width: 3 px; }
      
      

      Delete space after 3.

      
      
   9. p:first-child span { font-weight: 600; }
      
      

      I think this is right.

      
      
   10. p:first-line span { font-weight: bolder; }
       
       

       I would have never known this one.

       
       
   
   
4. I'm having a problem with this document.  It doesn't seem to want to validate for CSS.  What's wrong?  Fix it so that it does validate.
   
   

It's missing the dash in the opening comment.
It's missing the font size value in the font shortcut (Cascading Style Sheets - The Definitive Guide pg. 148).
In the style declaration, text comes before CSS.
Didn't need the semi-colons in the margin rule.

Here is the corrected file.

5. The '#' symbol is commonly called the 'hash symbol,' the 'pound sign' or the '_ _ _ _ _ _ _ _ _ _'  What's the word?
   

Octothorpe