LESSON 45: EXTERNAL STYLE SHEET EXERCISE

1. Read page 314 (from "Classification Properties") to page 320 in the Weasel Book, and answer the following questions (which are fair game for quizzes and tests).
   1. What is the general purpose of the "display" property?
   2. What are the four possible values for the "display" property?
   3. What does {display: none} do?
   4. What is the general purpose of the "white-space" property?
   5. What are the three possible values for the "white-space" property?
   6. Is there any difference between using the <pre> tag, or using {white-space: pre}?
   7. Will there be any difference in the output produced by each of the following lines of source code?
      <pre>spaces   between      words</pre>
<P STYLE="white-space: pre">spaces   between      words</P>
   8. Download the icons, and write the code that uses these icons as list-item markers:
      
      • You can use
      • cute graphics
      • as list item markers!
   9. Does the following list correspond to the "inside" or "outside" value of "list-style-position"?
      Some words before the list:
      • item #1 The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
      • item #2
      • item #3
   10. Does the following list correspond to the "inside" or "outside" value of "list-style-position"?
       Some words before the list:
       • item #1 The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
       • item #2
       • item #3
   11. Which value of "list-style-position" corresponds to a "hanging indent" for lists, "inside" or "outside"?
   12. Currently, how is the browser support for positioning with style sheets?
   13. What are the three possible values for the "position" property?
   14. Where does "relative positioning" place an element?
   15. Write the code to reposition the word below, using relative positioning. (Note: the word should move down 5 points and to the right 10 points)
       This word has moved!
   16. Write the code to reposition the word below, using relative positioning. (Note: the word should move up 5 points and to the left 10 points)
       This word has moved!
   17. Suppose you want to use relative positioning to move an element. You want it to move DOWN 10 points. Should you use the code "top: 10pt" or "bottom: 10 pt"?
   18. Suppose you want to use relative positioning to move an element. You want it to move to the RIGHT 10 points. Should you use the code "left: 10pt" or "right: 10 pt"?
   19. When positioning elements, can you use negative values for "top," "bottom," "left" and "right"?
   20. If you move some element using the "position: relative" property, what happens to the space where it would have been?
   21. If you move some element using the "position: absolute" property, what happens to the space where it would have been?
   22. If you move some element using the "position" property, is it possible that it might overlap something else?
   23. Use absolute positioning to print the words "upper left corner" in the upper left corner of a window.
   24. Use absolute positioning to print the words "upper right corner" in the upper right corner of a window.
   25. Use absolute positioning to print the words "lower left corner" in the lower left corner of a window.
   26. Use absolute positioning to print the words "lower right corner" in the lower right corner of a window.
   27. Write the code to produce the block of text below. (HINT: Read the last paragraph on page 318 carefully!)
       
       A block of text that is 4 inches wide and 1.5 inches tall. It has the word "YES" in the lower left corner, and the word "NO" in the lower right corner! YES NO
   28. What is the default for the "position" property?
   29. Can static elements be positioned or repositioned?
   30. What does the phrase "Z-Order" refer to?
   31. What is the purpose of the "z-index" property?
   32. Suppose two objects are positioned at precisely the same place. Object A has z-index 5, and object B has z-index 7. Which object will you see? That is, which object will be on top?
   33. For this question and the next, download the following images, savings them as "tigger.gif" and "tree.gif":
           
       Write the code to produce the following:
       Tigger behind a tree!
       
       
   34. Write the code to produce the following:
       Tigger in front of a tree!
       
       
   35. What (if any) is the difference between "visibility: hidden" and "display: none"?
   36. Describe what is produced by this code:
       A <span style="visibility: hidden">missing</span> word in a sentence!
   37. Describe what is produced by this code:
       A <span style="display: none">missing</span> word in a sentence!
   38. What is the purpose of the "overflow" property?
   39. What are the four possible values for the "overflow" property?
   40. Too much text is being put in a small box. Describe the results produced by "overflow: visible".
   41. Too much text is being put in a small box. Describe the results produced by "overflow: hidden".
   42. Too much text is being put in a small box. Describe the results produced by "overflow: scroll".
   43. Too much text is being put in a small box. Describe the results produced by "overflow: auto".
2. Follow all the instructions on External Style Sheet Exercise. I've included a hard copy of this lesson, for your convenience. Ignore Step 4; I am replacing those instructions here. This exercise is worth 45 points and is due on Friday, May 6 (15 points for each of the three moods). You must pass in to me HARD-COPY PRINT-OUTs of each of your three style sheet files (the ".css" files). I also want a HARD-COPY PRINT-OUT of the result of applying each style sheet to your basic HTML document.

• (25 pts) Questions from the index cards and reading (see below).
  There will be 32 randomly-chosen questions; you will cross off 7 questions.
  The remaining 25 questions are worth 1 point each.
• (45 pts total) External Style Sheet Exercise! See above.