LESSON 44: CASCADING STYLE SHEET WEB TUTORIAL

  1. Read page 307 (from "text-align") to page 314 (up to "Classification Properties") in the Weasel Book, and answer the following questions (which are fair game for quizzes and tests). You may have to run some "tests" of your own to answer some of these questions!
    1. What are the possible values for the "text-align" property?
    2. What kind of text formatting does "text-align: justify" produce?
    3. What kind of text formatting does "text-align: right" produce?
    4. Can the "text-align" property be applied to list items? Try it out!
    5. Write the code to produce the following right-formatted list:
        A right-aligned list:
      • item #1
      • item #2
      • item #3
    6. Write the CSS code to produce the following centered list:
        A centered list:
      • item #1
      • item #2
      • item #3
    7. What are the possible values for the "text-indent" property?
    8. Write the code to produce the following paragraph, which is 2 inches wide, has a half-inch indent, and has straight margins on both the left and right:

      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.

    9. Fill in the blank: Style sheets treat each element on a page as though it were contained within a           
      10. .
    10. Actually, each element in an HTML document is a series of containing boxes, beginning with the content itself, surrounded by           , then the           , which is surrounded by the           .
    11. Suppose you apply a background color to an element, which has a specified width, padding, border, and margin. Will the background extend in to the padding? Into the border? Into the margin?
    12. When you specify the margins for a box, should you follow a clockwise order (top, right, bottom, left) or a counter-clockwise order (top, left, bottom, right)?
    13. Describe the margins (top, bottom, left, right) that will be produced by the following code:
      {margin: 1em 2em 3em 4em}
    14. Describe the margins (top, bottom, left, right) that will be produced by the following code:
      {margin: 1em 2em 3em}
    15. Describe the margins (top, bottom, left, right) that will be produced by the following code:
      {margin: 1em 2em}
    16. Write CSS code that will produce a left margin of 1in, a right margin of 0.5in, and top and bottom margins of 0.75 inches.
    17. Are there CSS style commands to control the amount of padding around an HTML element?
    18. What element(s) can padding be applied to?
    19. Write the code to produce the sentence below:
      Here is a special word in this sentence!
    20. Write the CSS style command that would apply one-half inch of padding to all sides of an element.
    21. What happens if you specify a "border-width" and a "border-color" without specifying a "border-style"?
    22. What happens if you specify a "border-color" and a "border-style" without specifying a "border-width"?
    23. Write the CSS style command to produce the following box (which has a red border and a green interior):
    24. What property is used to set the width of an element?
    25. What property is used to set the height of an element?
    26. What is the purpose of the "float" property?
    27. What are the possible values for "float"?
    28. Write the code to produce the following:
      Lots of words! Lots of words! Lots of words! Lots of words! Hello! Lots of words! Lots of words! Lots of words! Lots of words! Lots of words! Lots of words!
    29. How is the current support for the "float" property?
    30. What does the CSS command "clear: left" mean?
    31. What does the CSS command "clear: right" mean?
    32. What does the CSS command "clear: none" mean?
    33. Ideally, where should an applied background color STOP?
    34. What happens if both a background-color and background-image are applied to an element?
  2. Follow all the instructions on Cascading Style Sheet Web Tutorial. I've included a hard copy of these index cards, for your convenience. Write out answers to all the questions; show them to me; these will be worth 20 points. However, these questions will NOT be part of the database for quizzes and tests.