Chapters 10, 11 & 12, pages 226-299 in HTML and CSS: Design and Build Websites

by Jon Duckett

Chapter 10

  1. Why is imagining that every HTML element has an invisible box around it key to understanding CSS?

    It is easier to customize and design a page when you imagine that each HTML element has its own box. Each box can be created to look different (color/background/text/border/size).

  2. Please define each of these four terms: selector, declaration, property, and value.

    A selector indicates which section the styled rule will apply to.

    A declaration indicates how the sections will be styled.

    There are two parts to a declaration: property (font-family, width, height, color, border) and value (font type, color). Property and value are separated by a colon. There can be more than one property and value in a declaration, and is separated using a semi-colon.

  3. According to the text what are all the pros and cons of using external versus internal style sheets? On page 241 does the textbook recommend internal or external style sheets? What do most authors (and JT) always consider best practice?

    Pros of external style sheets: It can be used for multiple pages and can be changed using one CSS style sheet. External style sheets keep your content separate from “how your page looks.” It makes loading a page faster, and is easier to read the code. I don’t see any CONS to using an external style sheet, however an internal style sheet is not recommended for a website with multiple pages (generally websites have more than one page).

  4. What are browser quirks? How do you make sure your designs aren't affected by them?

    Browser quirks or CSS bugs are what happens when a page is not displaying the way it was intended. To check for these quirks you need to see what your page looks like in different browsers or go to: or

Chapter 11

  1. What does the color property allow you to do?

    Allows you to specify color for text and backgrounds.

  2. On page 252 what are the three different ways to specify colors in a CSS rule? Which one of the three has a very limited palette and is not very useful?

    RGB Values, HEX Codes, and Color names. Color names are the most limited and not used often.

  3. How do you make reversed text (light color on dark background) more readable?

    High or medium contrast on a dark background will make it easier to read.

  4. 4. Why is the CSS3 opacity property so cool?

    It adds depth to a page (RGBA)

Chapter 12

  1. What is the difference between serif and san-serif type faces?

    Serif type fonts, used in print for “long passages,” have more detail on the ends of each letter, and are “easier to read.” (Georgia, Times, Times New Roman)

    San-serif texts do not have details and are easier to read when using smaller text sizes. (Arial, Verdana, Helvetica)

    Monospace letters are all the same width, and is a common font used for code (b/c alignment is square.

  2. Please describe in detail what a font stack and why you would want to use one. Based on the example serif font stack at the bottom of page 270, please type out an equivalent san-serif type stack starting with Verdana.

    A font stack is basically an “order” of font preferences that may not be available on some programs or browsers. Font stacks are used to indicate typefaces (sans-serif, serif etc.)

    Font Stack Example: font-family: Helvetica, Verdana, sans-serif

  3. 3. Most of the things you can do with the text-decoration property make designers cringe, because they are ugly, ineffective, or annoying. According to the textbook what is the one common thing designers use the text-decoration property for (bottom of page 282)?

    Designers most often use text-decoration to remove the underline of hypertext.

  4. What is leading and how does it affect readability?

    Leading is a term used to refer to the vertical empty space between lines of text. If there is not enough white space between lines of text, then it becomes hard to read.

  5. Much as I love this textbook, page 284, is just plain wrong on several counts. Kerning is a much more specialized term mostly related to type design. What they are talking about and is controlled by the letter-spacing property is called tracking. Most importantly word-spacing never increases readability. Repeat after me: word-spacing never increases readability.

    Word spacing does not increase readability.

  6. What two pseudo-classes allow you to change the look of your links?

    (:link) and (:visited link)

  7. What three pseudo-classes allow you to change how a user interacts with links?