The address for this web page is:   http://fishcaro.crosswinds.net/day_44_css_tutorial.htm
On to the next lesson!
Back to the COURSE SYLLABUS

44. CASCADING STYLE SHEET WEB TUTORIAL

There is an excellent web tutorial on Cascading Style Sheets at:
http://www.w3schools.com/
This will reinforce what you have already learned, and also teach a lot of new information. Click on the link above; then click on Learn CSS under HTML TUTORIALS in the left-hand margin. As you work through each section of the tutorial, there is a set of questions that I want you to answer and various problems to solve (all of which are fair game for quizzes and tests). Just click on each link below:

CSS Basic:

 CSS HOME
CSS Introduction
CSS Syntax
CSS How To
CSS Background
CSS Text
CSS Font
CSS Border
CSS Margin
CSS Padding
CSS List

CSS HOME

 This tutorial has instruction, examples, a quiz, and an excellent Reference section. These questions will help you to explore the References:
  1. In the CSS2 reference section, what does "W3C" stand for?
  2. Which versions of NN and IE support the border-color property?
  3. Look at the VALUES column in the table. Some values are printed in normal print, and some use a slanted style. What is the difference between these two types of entries?
  4. What kind of information does the CSS2 Print reference give?
  5. What kind of information does the CSS2 Aural reference give?
  6. What kind of information does the CSS Units reference give? What is a "point," and what is its CSS abbreviation? What is a "pica," and what is its CSS specification?
  7. Find the place in the various Color References where you can set the background color to, say, the color, BlueViolet, and see what all the other colors look like on top of this background.
Back to the top!


CSS Introduction
  1. What are styles normally stored in?
  2. View the CSS Demo. Which is your favorite style? View the style sheets. Pay particular attention to the format the author uses for coding when there is the same information for more than one selector; do you like this presentation? How would the code be formatted to apply a font-size of 75% to P, LI, TH, and TD?
  3. What problem were style sheets created to solve?
  4. What are the earliest versions of IE and NN that support cascading style sheets?
  5. How is CSS a breakthrough in web design?
  6. What are three different places that style information can be specified?
  7. Explain the "Cascading Order"; that is, if style information is given in more than one place, who wins?
Back to the top!


CSS Syntax
  1. What are the three parts to CSS syntax? Give an example of a typical style specification.
  2. What are these symbols called? { }
  3. When are quotes required around the value?
  4. If you want to specify more than one property: value combination, what is the correct separator for the property: value pairs?
  5. Write the (most efficient) code that would make H1, H2, and H4 have the color blue.
  6. What does the "class attribute" allow you to do?
  7. You have two types of paragraphs: ones that apply to boys, and ones that apply to girls. Paragraphs about BOYS should be left-aligned; paragraphs about GIRLS should be right-aligned. Write the style-sheet code that sets this up, and then apply it to two paragraphs. (The class names should be "boys" and "girls".)
  8. How can you define a class that can be used by MANY elements?
  9. Define a class called "MHS," for information about Miss Hall's School, that makes the color green. Show how it would be applied to H1, B, P, and I.
  10. The ID (for IDentification) attribute is used similarly to CLASS; however, it should be used for specific element(s) rather than an entire class of elements. If you have several elements that need treatment, use CLASS. But, if you have specific element(s) that must be uniquely treated, use ID.
    Write the code to identify two particular paragraphs with the ID "special_paragraph"; then make this special paragraph have font-size 150% and color yellow.
  11. Describe the effect of this code: 
    <HEAD>
<STYLE TYPE="text/css">
  P#alert {font-size: 200%; color: "green"}
</STYLE>
</HEAD>
<BODY>
<P ID="alert">First paragraph!</P>
<P>Second paragraph!</P>
<P ID = "alert">Third paragraph</P>
<CENTER ID="alert">centered element</CENTER>
</BODY>
  12. Describe the effect of this code: 
    <HEAD>
<STYLE TYPE="text/css">
  #alert {font-size: 200%; color: "green"}
</STYLE>
</HEAD>
<BODY>
<P ID="alert">First paragraph!</P>
<P>Second paragraph!</P>
<P ID = "alert">Third paragraph</P>
<CENTER ID="alert">centered element</CENTER>
</BODY>
  13. How do you insert comments in CSS code?
Back to the top!


CSS How To

 Some of the material in this section is review.
  1. There is something that looks like a "typo" in Example 1, Example 2, and the "External Style Sheet" section. (It appears in all 3 places.) What is this "typo"? (Actually, it's not really a typo; it comes from the fact that the web site has been "upgraded" to XHTML. More on this later.)
  2. What are the three ways of inserting style information?
  3. What tag is used to call up an external style sheet? Where does the tag go? What attributes must it have?
  4. When is it appropriate to use an external style sheet?
  5. When is it appropriate to use an internal style sheet?
  6. TRY OUT the code for defining a background image for a document. Use an image that you already have saved (or download one off the web). Notice the way the URL is specified (quoted path name, inside parentheses). Be able to WRITE THE CODE, without looking, to apply background image information in a style sheet.
  7. What will happen if an old browser (one that doesn't support style sheet information) comes across the following code? 
    <head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>
    In particular, WHAT will be displayed on the web page? WHY does this happen?
  8. What will happen if an old browser (one that doesn't support style sheet information) comes across the following code? 
    <head>
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
</head>
    In particular, will any undesired material be displayed on the web page? HOW has the problem been fixed?
  9. When is it appropriate to use inline styles? Why wouldn't you want to use inline style information regularly?
  10. Give an example of using inline style information to make a paragraph text have the color green, and a 2 inch left margin. Be sure to test your code yourself!
  11. Which, if any, of the following will work to accomplish the previous request? If it doesn't work, state why.
    <P STYLE="color: green; margin-left: 2 inches"> 
<P STYLE=color: green; margin-left: 2in>
    12. <P STYLE="color: green; margin-left: 2in"> <P STYLE="color: green, margin-left: 2in"> <P STYLE="color: green; margin-left: 2 in"> <P STYLE="color: green; marginleft: 2 in">
  12. Try out the following lines of code (separately). Look CAREFULLY at each line! Discuss your results. 
    <P STYLE="color: green; margin-left: 2in"> 
<P STYLE="color: green; margin left: 2in"> 
<P STYLE="color: green; margin: 2in"> 
<P STYLE="color: green; margin: 1in"> 
<P STYLE="color: green; margin: 0.5in"> 
<P STYLE="color: green; margin: 10px"> 
<P STYLE="color: green; margin-right: 2in"> 
<P STYLE="color: green; margin-top: 2in"> 
<P STYLE="color: green; margin-bottom: 2in"> 
<P STYLE="color: green; margin top: 2in">
  13. Suppose an external style sheet says paragraphs should be red; an internal style sheet says they should be green; and inline information says a particular paragraph should be blue. What color will the paragraph be? (CODE this situation to check it out!)
Back to the top!


CSS Background

 Study the EXAMPLES at the beginning of the section, together with the "Background Properties" chart, to answer the following questions. Determine what version(s) of Internet Explorer and Netscape Navigator you are using. In all the questions below, if something doesn't seem to work, check the "Background Properties" table to see if your current browser supports what you are trying to do!
  1. In the "Set the Background Color" example, what tags are illustrated that can have background color set?
  2. Make a conjecture about other tags for which you can set the background color. Find at least 7 other tags! Code it yourself to test your conjecture.
  3. What are the three different ways to specify the value (color) for background-color?
  4. Be sure that you can CODE for background color, without looking!
  5. Write (and test) the code to make bold entries have RED type on a BLUE background.
  6. Write (and test) the code to make italic entries have GREEN type on a YELLOW background.
  7. Does a background color work over a background image? Try it!
  8. Does a background image work behind, say, an H1 tag? Try it!
  9. What happens if BOTH a background-color and background-image are specified for, say, an H1 tag? Try it!
  10. On the "How to repeat a background image" example, try both "repeat-x" and "repeat-y" as the values; discuss your results. Which gives a "vertical" repetition of the image? Which gives a "horizontal" repetition of the image?
  11. Here's how background-repeat is supposed to work:
    repeat: image repeats both horizontally and vertically
    repeat-x: image repeats only horizontally
    repeat-y: image repeats only vertically
    no-repeat: displays image only once (does not repeat)
    Code "repeat" and "no-repeat" and see if they work as expected.
  12. What is the default value for background-repeat?
  13. In the "How to place the background image" example, try all these values for background-position:
    top left
    top center
    top right
    center left
    center center
    center right
    bottom left
    bottom center
    bottom right
    Do they all work as expected?
  14. The code below should place the image at a position 20% of the window-width from the left, and 80% of the window-height from the top. Try it. Does it work?
    background-position: 20% 80%
  15. Write the code to position the element 15% of the window-height UP from the bottom of the page, and 30% of the window-width to the left of the right of the window.
  16. Compare the results of these codes:
    background-position: 20% 80%
    background-position: 20 80
     What do you suppose that the units of the 20 and 80 are, in the second case?
  17. Try each of the following lines, which illustrate various units that you can use to specify position:
    background-position: 1in 2in
    background-position: 1cm 2cm
    background-position: 1mm 2mm
    background-position: 10em 20em
    background-position: 10ex 20ex
    background-position: 10pt 20pt
    background-position: 10pc 20pc
    background-position: 10px 20px
     Discuss each of these units: What do they stand for? What is their description? (The "CSS Units" Reference section may be helpful here.)
    in, cm, mm, em, ex, pt, pc, px
  18. What is the default unit? That is, if no unit is specified (like in background-position: 20 80, what unit gets used?
  19. In the "How to place the background image" example, copy the text "Note: Netscape 4 ... property." and paste it in about 10 times, so that when you click "Display result" a scroll-bar appears. Now, do the following:
    Code:
    background-position: 1in 2in
    and use the scroll-bar. Does the image move with the text?
    Code:
    background-position: 20% 60%
    and use the scroll-bar. Does the image move with the text?
  20. Go on to the "How to set a fixed background image" example. How can you stop the image from moving with the text?
  21. Alter the example: make the smiley face be positioned 20% from the left, 80% from the top, and NOT scroll with the text.
  22. Alter the example: make the smiley face be positioned 1 in from the left, 2 inches from the top, and NOT scroll with the text.
  23. What are the two possible values for background-attachment? What is the default?
  24. Go on to the "All the background properties in one declaration" example. Does the order that the values are listed make a difference? Experiment!
Back to the top!


CSS Text
  1. Study the "Set the color of the text" example. If you put a space between "rgb" and (#,#,#) does it work?
  2. There are two ways to specify RGB color: To change from the hexadecimal to the decimal representation: Here's an example.
    Let's change #13CA05 to rgb(x,y,z) form. Thus, we need to take the hexadecimal number #13 and change it to the decimal number x; change #CA to the decimal number y; and change #05 to the decimal number z.
    First notice that: Thus, #13CA05 = rgb(19,202,5). (Code both of these to check that they're the same color.)
    Now, you try one! Verify that #33AA66 is the same as rgb(51,170,102). CODE both of these to see that you get the same color!
  3. Change #00FFCC to rgb(x,y,z) form; code both to check that they're the same color.
  4. Change rgb(255,0,72) to #RRGGBB. Code both to check that they're the same color. Is this a web-safe color?
    (If you need to review the techniques for working with hexadecimal numbers, go to:
    Lesson 25: Number Systems
  5. In the color representation rgb(x,y,z), what is the LARGEST value that x, y, and z can take on?
  6. Study the "Specify the space between characters" example. What is the property that is used to increase or decrease the space between characters?
  7. Write the code needed to increase the space between characters by 5 pixels in a level-3 heading. Test it!
  8. Write the declaration needed to decrease the space between characters by 1 pixel in paragraphs. Test it!
  9. Design an experiment to test if you can specify decimal measurements, like 0.3in, for letter spacing. What's your conclusion? Does it work? Does it work properly? (Hint: Use classes!)
  10. Do things work correctly if you put a space between the number and the unit, like "1 cm"?
  11. Is "letter-spacing: 9.5px" different from "letter-spacing: 9px" and "letter-spacing: 10px"? How about "letter-spacing: 9.7px" and "letter-spacing: 9.3px"? Make a conclusion.
  12. What is the default value for the "letter-spacing" property?
  13. Study the "Align the text" example. What are the four possible values for the "text-align" property? Try them all! Describe the effects of each one. (In each case, state which margin(s) are "straight" and which are "jagged".) What is the default value?
  14. What is the default value for "text-align"?
  15. List all properties that are not currently supported by (any versions of) Netscape Navigator.
  16. List all properties that are not currently supported by (any versions of) Internet Explorer.
  17. Study the "Decorate the text" example. What is the property to use for decorating text? What are the possible values?
  18. Does "blink" work in both Internet Explorer and Netscape Navigator?
  19. How about the other values? Do they all work correctly in both major browsers?
  20. Study the "Indent text" example. What is the property to use for indenting text? What are the possible values?
  21. Describe what these codes produce:
    p {text-indent: 1in}
    p {text-indent: 25%}
    p {text-indent: 50%}
    p {text-indent: -10%}
  22. Study the "Control the letters in a text" example. Write the code to make all the letters in a paragraph appear lowercase in a browser, regardless of how they are typed in the source code.
  23. What's the difference between "uppercase" and "capitalize"?
  24. What is the difference between "word-spacing" and "letter-spacing"?
Back to the top!


CSS Font
  1. Study the "Set the font of a text" example. List three possible values for the "font-family" property.

  2. You can specify a comma-separated list of fonts in the font-family property. The first font in the list that is on the user's computer will be used. It is advisable to include a "generic" font family as the last option in the list so that if the specific fonts are not found, then a font that matches the general desired style will be used.
    The five generic font families are: Be sure that you know these five generic families, and can state a sample font from each!
  3. Set up five paragraph classes corresponding to the five generic font families, and do a test paragraph for each one, like this:
    (in the head...)
    p.serif {font-family: serif}
    (in the body...)
    <p class="serif">This is a paragraph using a serif font.</p>
  4. Study the "Set the size of the font" example, and the table information on the "font-size" property. What are the value NAMES (like "xx-small") that can be used with the "font-size" property? Code each of these sizes to see how they compare.
  5. Code both a NORMAL H3, a "smaller" H3, and a "larger" H3. Compare. Do the same for H2 and paragraphs. Use classes: e.g.,
    h3.larger {font-size: "larger"}
  6. Besides using value names (like xx-small), there are two remaining ways that font size can be specified. What are these two ways?
  7. Set up a general class (called "double") that is 200% larger than the existing type; apply it to paragraphs, H1, and H2. Compare with normal paragraphs, H1, and H2. Does it make the type twice as tall?
  8. Make paragraphs have 10 pt type; then 20 pt. Determine (by experimenting) if there are MAXIMUM and MINIMUM point sizes that can be displayed. Does the type just keep getting smaller and smaller as you decrease the size? Does it just keep getting bigger and bigger as you increase the size? Can you see a 1pt size type? Try out a 1000pt size!
  9. Study the "Set the style of the font" example. What are the three possible values for "font-style"?
  10. Study the "Set the variant of the font" example. What are the two possible values for the "font-variant" property?
  11. Study the "Set the boldness of the font" example. What property is used to the specify the "thickness" or "boldness" of a font? What are the possible values?
  12. What happens if you specify a font weight of 1000? Is it "bolder" than 900?
  13. Can you visually distinguish between font weights of 100, 200, 300, 400, 500, 600? Which is the first font weight where you can visually "see" the difference?
  14. Study the "All the font properties in one declaration" example. What property is used as a shortcut, to set all the font properties at once? Does it matter the order that the values are listed?
Back to the top!


CSS Border

 STUDY EACH OF THE EXAMPLES IN THIS LESSON in both Internet Explorer and Netscape. If you have older browsers, you will see some very different results!
  1. Study the "Set the style of the four borders" example. List the available border styles, and the declarations needed to get them.
  2. When you put a border around a paragraph element, does it JUST enclose the words, or does it enclose the entire "line width" (which depends on the current size of the browser window)?
  3. Try applying a border to the EM tag. Does it just enclose the words, or the entire line?
  4. Put some bordered emphasized text within a bordered paragraph. Does it work?
  5. Try applying a border to all of these elements: H1 through H6, B, EM, I, A, BIG, BLINK (in Netscape), BLOCKQUOTE, BODY, BR, CODE, UL, PRE, SMALL, STRONG, TABLE. Do they all work?
  6. Study the "Set different borders on each side" example.
    When you code:
    border-style: solid dotted dashed double
    you get different borders styles on each of the four sides. What order applies (e.g., left, bottom, right, top ???)
  7. What happens if you list only two styles, like:
    border-style: solid dashed
  8. What happens if you list only three styles, like:
    border-style: solid dotted dashed
  9. Study the "Set the color of the four borders" example. What property is used to set the color of the border? Does it work if you don't have a "border-style" property set?
  10. Write the code for a paragraph with a green dashed border. Try it in both Internet Explorer and Netscape.
  11. Can you use hexadecimal codes, color names, and rgb(#,#,#) values to specify the color?
  12. What happens when you list four different colors, like this?
    border-color: red green blue yellow
    How about only three colors? How about only two?
  13. Study the "Set the width of the bottom/left/right/top border" examples. What property is used to set the border widths? What values can it take?
  14. Try making the width 10pt, 10px, 10cm, 10in, 10em, 10 (no units). What is the default unit?
  15. If you have a border-color, does a "wide" border take this color?
  16. Write the code to enclose a paragraph with the following properties:
    left border is 1em, green, solid;
    top border is 2em, red, dashed;
    right border is 3em, blue, dotted;
    bottom border is 4em, yellow, double.
Back to the top!


CSS Margin
  1. What do margin properties define?
  2. Study the "Set the left/right/top/bottom margin of a text" examples. You'll see basically the same thing, over and over again. Then, study the "All the margin properties in one declaration" example. When you list all four margins at once, what is the order that the margins are being specified?
  3. Create a class called ".offset" that sets the top and bottom margins to 1 centimeter, the left and right margins to 0.5 centimeters. Apply it to a paragraph.
  4. Does margin work with the header tags? Does it work with list items (<LI>)?
  5. Create a class called ".indent" that sets the left margin to, say, 2cm. Try applying it to a list item (<LI>) in an unordered list. Then try applying it to the <UL> tag. What is the difference in applying it in these two places?
Back to the top!


CSS Padding
  1. What do padding properties define?
  2. Study the "Set the left/right/top/bottom padding" examples. Is the hyphen required in the property name? Are negative values allowed?
  3. Study the "All the padding properties in one declaration" example. When you list only two values (like "padding: 2cm 3cm") what does the first number (2cm) specify? What does the second number (3cm) specify?
  4. To compare the "margin" and "padding" property, see what the following code produces:
    <head>
<style type="text/css">
H1 {background-color: red; padding: 1cm 2cm}
</style>
</head>

<body>
<H1>This is a heading! This is a heading!</H1>
</body>
    Then, replace "padding" with margin and see what changes.
Back to the top!


CSS List
  1. Study "the different list-item markers in unordered/ordered lists" examples. What is the property name used to set the marker? What are the most common values for unordered lists; for ordered lists?
  2. Can you use an image as a list-item marker? If so, how?
  3. What does the "list-style-position" property do? What are its possible values?
  4. If you use the "list-style" property shortcut for specifying all the list item values, does the order that you list the values matter?
  5. What do you suspect will happen if you specify BOTH an image and a square for a list item marker?
Back to the top!
On to the next lesson!
Back to the COURSE SYLLABUS
© 2001 Carol J.V. Fisher    All Rights Reserved