LESSON 43: CASCADING STYLE SHEET PROPERTIES

Read page 293 (from "Adding Styles to an HTML Document") to page 299 (up to "Pseudo-Selectors") in the Weasel Book, and answer the following questions (which are fair game for quizzes and tests):
1. Write the code for an inline style element that will make an H1 tag appear in red.
2. How should inline style information be used?
3. What container tag is used to embed style sheet rules in the head of a document?
4. What is the only required attribute in the <style> tag?
5. What is the purpose of the "media" attribute for the <style> tag?
6. List three different possible values for the "media" attribute for the <style> tag:
7. What is the purpose of putting the  comment tags around the contents of the STYLE container?
8. What might happen if you don't comment out the contents of the STYLE container?
9. Currently, what is the only widely supported style sheet language?
10. Has the W3C prepared for the possibility of style sheet languages other than CSS in the future? If so, how?
11. What currently is the only viable type to provide here: <STYLE TYPE="?????">
12. What might happen if you omit the type attribute in the STYLE tag?
13. Can an external style sheet contain HTML tags?
14. When naming an external style sheet, what extension should you use?
15. Can an author link to more than one style sheet in a document?
16. If you're linking to an external style sheet, where should the link information go?
17. Write the code that would link a style sheet called "stylesheet.css" to an HTML document. Be sure to put this code in the correct part of the HTML document.
18. What does the "REL" attribute for the LINK tag stand for?
19. If you are using the LINK tag to apply an external style sheet, what should be the value of the REL attribute?
20. What does "inheritance" refer to, in the context of CSS?
21. Suppose you have the following HTML code:
  <P>This <em>emphasized</em> word and this <u>underlined</u> word are inside the paragraph!</P>
  If the paragraph is considered the parent, then what are the children (in the context of CSS inheritance)?
22. Suppose you have the following HTML code:
  <P>This <em>emphasized</em> word and this <u>underlined</u> word are inside the paragraph! </P>
  If there is a CSS style command that make paragraphs red, then will the emphasized and underlined word inherit this red color?
23. Suppose there is a CSS command that says all text in the BODY should be red. Then, there's another CSS command that says that emphasized text should be blue. What color will the emphasized text be? Support your answer.
24. Suppose that Carol is writing CSS style commands, and gets distracted. She actually has two conflicting instructions (see below):
  EM {color: red} ... more code ... EM {color: orange} What color will emphasized text be, and why?
25. Why are style sheets said to be "cascading"?
26. Order the following from GENERAL to SPECIFIC in the CSS hierarchy. The elements lower in the list should have more weight, and override styles above them. (They are currently listed somewhat alphabetically)
  - browser default settings
  - embedded style sheets
  - imported style sheets
  - inline style information
  - linked external style sheets
  - user style settings (set in browser as a "reader style sheet")
27. If you want a style sheet rule NEVER to be overridden by a subsequent rule, include the indicator just after the and before the .
28. What color will emphasized text be in the example below, and why? EM {color: red !important} ... more code ... EM {color: orange}
29. Fill in the blanks using the words "all other", "author" and "reader":
  In CSS1, !important rules in style sheets generated by the take precedence over style sheets. However, in CSS2, !important rules in style sheets take precedence over style sheets.
30. Which HTML tag is used to delimit block-level tags, <div> or <span>?
31. What does <DIV> stand for?
32. Which HTML tag is used to delimit inline tags, <div> or <span>?
33. Attribute selectors allow web page authors to apply style rules based on special identifying attributes placed within HTML element tags. There are currently two available attribute selectors: and .
34. Consider the following code:
  <HEAD> <STYLE TYPE="text/css"> BODY {color: blue} H1 {color: red} H1.special {color: green} </STYLE> </HEAD> <BODY> Some text. <H1>A normal heading</H1> <H1 class="special">A special heading</H1> </BODY>
  What color will "some text" be? What color will "a normal heading" be? What color will "a special heading" be?
35. What punctuation mark is used to specify a "class"? That is, to specify the styles for elements of a particular class, add the class name to the HTML selector, separated by a .
36. Write the CSS code that would apply the color "red" to ALL members of a class named "special".
37. What is the difference between "class" and "id"?
38. Can two elements have the same "id" name in the same document?
39. Suppose you have two elements that need special treatment. Should you use "class" or "id"?
40. Suppose you have one element that needs special treatment. Should you use "class" or "id"?
41. The value of an "id" attribute must always begin with a .
42. Which of the following gives "class" info? Which gives "id" info?
  P.special {color: red} P#p23 {color: blue}
43. Since "id"s are unique, the HTML tag name may be . Thus, give a simpler way that you could give this CSS command:
  P#p23 {color: blue}
44. What is the name of the symbol "#" ?
Follow all the instructions on Cascading Style Sheet Properties. I've included a hard copy of these index cards, for your convenience. Here, you'll get lots of practice playing with CSS properties and values for paragraphs. As you type in each line, read the associated information in the Weasel book (pages 301 to 305; ignore the old page numbers) and answer the following additional questions:
1. Can you specify any font (or list of fonts, separated by commas) in the font-family property?
2. Write the style-sheet code that would make paragraphs be displayed in "Algerian," or else a general fantasy font.
3. Suppose you are specifying desired fonts using the font-family property. What should you include as the last option in your list?
4. What are the five possible generic font-family values?
5. What is the difference between a "serif" and a "sans-serif" font?
6. Give an example of a common "serif" font:
7. Give an example of a common "sans-serif" font:
8. What does "monospace" mean?
9. Give an example of a common "monospace" font:
10. What font names must be enclosed in quotation marks?
11. Correct this code: P {font-family: Trebuchet MS, Verdana, "sans-serif"}
12. Correct this code: P {font-family: "Trebuchet MS," Verdana, sans-serif}
13. What is the default value for the font-style property?
14. What is the intended difference between "oblique" and "italic"?
15. Which is intended to be "curvier," oblique or italic?
16. Is "bold" a value of "font-style" or "font-weight"?
17. What is the only currently-available font-variant value?
18. Font-weight can be specified as a descriptive term: , , , or .
19. Font-weight can be listed as one of nine numeric values. What are these nine values?
20. A font-weight of "normal" corresponds to the numeric value .
21. A font-weight of "bold" corresponds to the numeric value .
22. Suppose you have words with font-weights 100, 200,..., 900. Will all these words necessarily appear in different ways? Comment.
23. How many methods are there for specifying font size using the font-size property, and what are they?
24. What are the possible absolute size values for the "font-size" property?
25. What are the possible relative size values for the "font-size" property?
26. Tell what each of the following units stands for:
  - px
  - pt
  - in
  - mm
  - cm
27. There are approximately points in one inch.
28. The "em" is a relative unit of measurement that is approximately the width of the in the current font.
29. The "ex" is a relative unit of measurement that is approximately the width of the in the current font.
30. In simplified terms, the "line-height" property sets the distance between the of lines of text.
31. Does the following code exhibit a change in the "word-spacing" or "letter-spacing" property?
  Here are some words.
32. Does the following code exhibit a change in the "word-spacing" or "letter-spacing" property?
  Here are some words.
33. What "decorations" can be applied with the "text-decoration" property?
34. The "text-transform" property affects the of an element.
35. What are the possible values of the "text-transform" property?
36. Show the effects of this code:
  <span style="text-transform: capitalize"> cArOl </span>
37. Show the effects of this code:
  <span style="text-transform: uppercase"> cArOl </span>
38. Show the effects of this code:
  <span style="text-transform: lowercase"> cArOl </span>

THE QUIZ OVER THIS LESSON WILL CONSIST OF:

(40 pts) Questions from the index cards and reading (see below).
There will be 55 randomly-chosen questions; you will cross off 15 questions.
The remaining 40 questions are worth 1 point each.
(20 pts total) FIRST CODING PART:
You will be asked to apply a specified style to a block of text. I may use any of the style sheet info discussed in this section. For example, I may say "apply the following style to this paragraph: first line indented by 2 inches; text color blue; small font size; use a font without serifs.
(10 pts) SECOND CODING PART:
You will be asked to put a BORDER around some text. I will specify the width of the border, the style of the border, and the color of the border.

Prepare for the quiz over this section by practicing below.
Questions are asked in random order.
You can generate a printable quiz with solutions.