TimKeesling.com
CSS Week 8 Review

1. The style rule p { left-margin: 2em; }sets the left margin for the paragraph element to 2em.
   
   
   • b. False
   
   
   
2. How would I write code to set the white spaces between words to 3em? Remember that browsers have default spacing.
   
   

   •               
                     p {
                       word-spacing: 3em;
                     }
                   
                   

     This would be the result of the above code!

   
   
3. Which of the following properly tiles an image across the entire background of the Web page?
   
   
   • a. body { background: url(bluetile.jpg) repeat; }
     Please see my stylesheet for a working example.
   
   
   
4. Which of the following correctly sets the element's position property to absolute and offsets it from the top of the page by 140 pixels?
   
   
   • d. position: absolute; top: 140px;
     
   
   
   
5. You have been asked to give a presentation at a conference. Your visual presentation is in the form of a website that is projected onto a screen. You are also quite sure that some of those present will want a printed copy of the document. You want to create a presentation that is projected with Arial font, colourful headings and a largish font size. But, for the print version, you would rather the material be optimized for black ink and in a serif (Times New Roman) font at a suitable size for print (10/12 points). Please create a stylesheet that would accomplish this.
   
   

   •                  
                          /* Stylesheet created for Projection screen and for Printing */
                          
                          body {
                            background-color: #fff;
                            color: #000;
                          }
                          
                          /* Start Projector Styles */
                          @media projection {
                            body {
                              font-family: Arial, Sans-Serif;
                            }
                            h1, h3 {
                              background-color: inherit;
                              color: #ff0000;  
                            }
                            p {
                              background-color: inherit;
                              color: #006600;
                              font-size: 1.2em;
                            }
                          }
                          /* End Projector Styles */
                          
                          /* Start Print Styles */
                          @media print {
                            body {
                              font-family: "Times New Roman", serif;
                            }
                            h1, h3 {
                              background-color: #fff;
                              color: #000;  
                            }
                            p {
                              background-color: #fff;
                              color: #000;
                              font-size: 12pt;
                            }
                          }
                          /*End Print Styles */
                      
                    

   
   
   
6. You are creating an instructional website. There is a strong possibility that several people accessing your site have visual impairments. What strategy could you use - assuming that they will be using adaptive technology (screen reader, screen reading browser)?
   
   
   • Besides using Accessible XHTML (markup) to help aid a screen reader to pronounce the information in an orderly fashion, you may want to use an "Aural Stylesheet" which will allow not only the blind to hear the data information but also other user agents such as embedded devices in cars and such that might read out driving directions or even email to users. The media type aural is fully compatable with CSS 2.0 but is depreciated in CSS 2.1. In future versions of CSS it is likely that the media type "speech" will represent spoken rederings of documents.
   
   
   

Challenge Questions (optional)

1. You can find some help for question #1a and #1b here: http://www.w3.org/TR/REC-CSS2/cascade.html#at-import. (These questions are also covered in your text.)
   
   
   • a. Where should you place the @import notation?
     • @import rules must precede all other rules (except the @charset rule, if present).
     
     
     
   • b. What order will a linked style sheet cascade in?
     • Generally the order would be, first the "Inline Style" then second the "Embedded Style" and third the "Linked Stylesheet". This is generally speaking of course. If you have any "!important" rules set, that will override anything set for the current element with that assigned.
   
   
2. If you use a percentage value for margin and padding, the percentage is based on the:
   
   
   • a. area of the box
   • Example:
     
     Box width and height = 200px
     
     Padding of 5% is set between the words and the border inner edge.
     
     Margin of 5% is set between the outer edge of the border to any other content neighbor of the div box. For an example look at the word "Example" above the box and see how far the box is spaced down and over to the right from the word.
   
   
   
3. What are the ten media types for CSS?
   
   
   • 1. all (default if no other is specified)
     2. aural
     3. braille
     4. embossed
     5. handheld
     6. print
     7. projection
     8. screen
     9. tty
     10. tv