LESSON 41: INTRODUCTION TO CASCADING STYLE SHEETS

1. Study the index cards on Introduction to Cascading Style Sheets. I've included a hard copy of these index cards, for your convenience.
2. Be sure that you can answer all the following questions, which are fair game for quizzes and tests.
   1. What does "CSS" stand for?
   2. Fill in the blanks: Cascading Style Sheets give web designers more            over how pages are           . They allow            to be applied to any web page or collection of web pages.
   3. What does "cascading" mean, in "Cascading Style Sheets"?
   4. In what year did the W3C first publish its recommendations for style sheets?
   5. What was the first browser to implement style sheets?
   6. Are style sheets a GOOD thing, or a BAD thing, for HTML purists who believe that style should be separate from content and structure?
   7. List four major advantages of CSS (no explanations needed, just list the headings)
   8. List four typographical things that you can specify with style sheets:
   9. How is it that using CSS can make smaller HTML documents?
   10. Is it possible to link many different HTML pages to a single style sheet?
   11. What is the earliest version of Netscape Navigator that supports style sheets?
   12. Will CSS work properly without closing tags?
   13. What does the phrase "degrade gracefully" mean, in the context of applying CSS?
   14. List the three ways to apply style (no explanations needed; just list the headings)
   15. What is an "inline style" for CSS?
   16. Give an example of an "inline style" specification for CSS.
   17. Should CSS inline styles be used frequently? If not, when should they be used?
   18. Briefly describe how a CSS "embedded style sheet" works:
   19. What is the most efficient way to specify the style of a single document?
   20. What is the best way to specify the style for a collection of HTML documents?
   21. Which type of CSS style information gets inserted in the HEAD of an HTML document?
3. Do worksheet items (W41.1) through (W41.4) from the original lesson, Introduction to Cascading Style Sheets. Show me that it works! (10 points)
4. Finish up the reading on frames, by reading pages 250 (from "Frame-Proof Your Site") to page 252. Be sure that you can answer all the following questions, which are fair game for quizzes and tests:
   1. Is it possible to prevent your site from being loaded into someone else's frame? (YES or NO)
   2. (JAVASCRIPT EXERCISE #1; 10 pts; frame-proof your site) Create a simple framed document, with just two columns. The left column should hold left_col.htm and the right column should hold right_col.htm. This will be called FRAMESET1.
      Create another framed document, with two rows. The top row should hold top_row.htm and the bottom row should hold bottom_row.htm. This will be called FRAMESET2.
      Put a link in rightcol.htm that links to FRAMESET2. Do the two rows get loaded into the right column?
      Insert the appropriate JavaScript code to prevent FRAMESET2 from being loaded into another frame. Try it again. Show me that it works!
   3. What does the phrase "preloading images" refer to?
   4. Can a frameset document be used to preload images? (YES or NO)
   5. Briefly describe the trick for using a frameset document to preload images.
   6. How does WebTV "support" frames?
   7. Is there a scrolling function in WebTV?
   8. Suppose you have an HTML document that ONLY MAKES SENSE in the context of its frameset. Is there a way to prevent it from ever appearing out of this context?
   9. (JAVASCRIPT EXERCISE #2; 10 pts; keeping pages in their frames) Go back to JavaScript Exercise #1. Put a link in "top_row.htm" that loads "left_col.htm". Does this frame load in the first row, out of the context of its frameset structure?
      Now, insert appropriate JavaScript code in "left_col.htm" that will prevent it from ever being loaded outside of its frameset structure. Try loading it again. What happens?
   10. Can all browsers (IE and NN) render frame structures specified in pixel measurements correctly? If not, comment.
5. Jump to page 289 in the Weasel book, to start reading about Cascading Style Sheets. Read pages 289 to the top of page 293. Be sure that you can answer all the following questions, which are fair game for quizzes and tests:
   1. Can style sheets use units like "points" and "ems," which are common in desktop publishing?
   2. Are style sheet functions built into popular web authoring tools, like Macromedia Dreamweaver and Adobe GoLive?
   3. What remains the single drawback to implementing style sheets?
   4. Do all current browsers support style sheets?
   5. Do all current browsers support style sheets in the same way?
   6. What appendix in the Weasel book documents the way that different browsers handle CSS?
   7. In Appendix E, "CSS Support Chart," in the Weasel book, what does a checkmark mean?
   8. In Appendix E, "CSS Support Chart," in the Weasel book, what does a crossed-out checkmark mean?
   9. In Appendix E, "CSS Support Chart," in the Weasel book, what does a "P" mean?
   10. In Appendix E, "CSS Support Chart," in the Weasel book, what does a "B" mean?
   11. What does "buggy support" refer to, in Appendix E, "CSS Support Chart," in the Weasel book?
   12. In Appendix E, "CSS Support Chart," in the Weasel book, what does a "Q" mean?
   13. What does "quirky support" refer to, in Appendix E, "CSS Support Chart," in the Weasel book?
   14. Suppose you're designing a web page for an audience that is still using IE5 on Windows 95. Should you use the "small-caps" property? Why or why not? (You may use the Weasel book!)
   15. Does IE3 for Macintosh support the "word-spacing" property? (You may use the Weasel book!)
   16. Give examples of two end tags that are commonly left off when coding HTML, but should NOT be left off when using style sheets.
   17. What does the phrase "serve different styles to different browsers" mean, in the context of CSS?
   18. Should you be using the >font> in your current coding?
   19. Should you be using tables and frames as layout devices in your current coding?
   20. Does the O'Reilly series of computer books have a book that is dedicated to Cascading Style Sheets?
   21. Fill in the blanks: The key to working with style sheets is understanding how to            rules and then            those rules to one or more           .
   22. What is the general structure of a style sheet rule?
   23. What is the "declaration" part of a style sheet rule?
   24. Write a style sheet rule that would make all first-level headings red.
   25. Consider this style sheet code:
       H1 {color: red}
       What is the selector?
   26. Consider this style sheet code:
       H1 {color: red}
       What is the property?
   27. Consider this style sheet code:
       H1 {color: red}
       What is the value?
   28. Consider this style sheet code:
       H1 {color: red}
       What is the declaration?
   29. What is the purpose of the "selector" in a style-sheet rule?
   30. What grammatical symbol is used between the property and value in a style-sheet rules?
   31. What is a "property" in a style-sheet rule?
   32. May a declaration contain more than one property/value pair?
   33. If you have more than one property/value pair in a declaration, then what grammatical symbol must be used between them?
   34. Fill in the blank: In style sheet rules, VALUES are dependent on the           .

• (40 pts) Questions from the index cards and reading (see below).
  There will be 50 randomly-chosen questions; you will cross off 10 questions.
  The remaining 40 questions are worth 1 point each.
• (15 pts total) CODING PART: Be able to write simple style sheet information that is embedded in the HEAD of an HTML document. For example, you should be able to make H1 tags colored green; or make bold text colored red.