TimKeesling.com
CSS Week 1 Quiz

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. We will post the answers to this quiz on Saturday. 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;
                      }
                      
                  

   • ANSWERS:
     Question 1, 460px total -- Well, I got this wrong but I see now where I messed up! I see it is supposed to be 502px total
     Question 2, 400px
   
   
   
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; }
            
               

   • ANSWERS:
     Question 1, A. In Standards Mode all text not wrapped in <p> is blue with yellow background, body has yellow background as well. All text wrapped in <p> is blue and has a white background. B. In Quirks all text is blue and body has yellow background. Text wrapped with the <p> is red and has a white background.
     
   
   
3. Tell what - if anything - is wrong with the following styles:
   
   

   •                
     1. p { font: arial, verdana, sans-serif; } Incorrect usage of font property.  Correction: p { font-family: ...}
     2. div { font-size: 12px; line-height: 1.5; } No unit specified.  Correction: {...line-height: 1.5em; }
     3. em { font-style: italics; } "italics" is not a valid font-style property. <em> will render text italic 
     unless otherwise specified.
     4. body { color: #000; background: #ffffff; }  While this will probably still render, you will probably
      receive a warning from the css validator requiring you to change "background" to "background-color".
     5. body { color: transparent; background-color: pink; }  This will render your text unreadable unless
      you specify a color for your text elsewhere in your css document.
     6. body { color: brown; background-color: transparent; }  While this will work, it is better to use "inherit"
      rather than "tranparent".  For the "body" you might as well just use "#fff" because in most cases that is what
      you will get by using "transparent" as a color value.  Also it is better to use a hex or RGB color value instead
      of the color word.
     7. p { font: 1em/1.5em Times New Roman, Times; } Times New Roman needs to be quoted "" since it is more than one word
      for the font family.
     8. span { border-width: 3 px; } While this needs at least one more border property to work such as "border-style",
      there is an extra space between  the "3" and the "px" in the unit spec rendering it incorrect.
     9. p:first-child span { font-weight: 600; } Incorrect syntax.  Correction: p > span:first-child { font-weight: 600; }
     10. p:first-line span { font-weight: bolder; } Incorrect syntax.  Correction: p > span:first-line { font-weight: bolder; }
                    

   
   
   
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.
   
   
   • ANSWER:
     Original doc - there was no stylesheet found by the validator. Correction: <style type="text/css">
     Wrong: font: 1em bold arial, sans-serif; Right: font: bold 1em arial, sans-serif;
     Background color of #ffe is an incomplete value. Changed to #ffee55 for light yellow.
     Unexpected Character Sequence there is 3 extra ";" that needs taken out.
     Updated Page
   
   
   
5. The '#' symbol is commonly called the 'hash symbol,' the 'pound sign' or the '_ _ _ _ _ _ _ _ _ _' What's the word?
   
   
   • ANSWER:
     octothorpe