H152 - Review Questions Week 1

  1. Given the following style declarations, what is the width (from the outside edge of the left margin to the outside of the right margin) of the <div> in standards/strict mode? And what is the width of the <div>'s content area?
    div {
    height: 200px;
    width: 400px;
    margin: 10px 20px 30px 40px;
    padding: 10px 20px 30px;
    border: 1px solid red;
    }

    Total width: 462px (border-width + margin-left + width + margin-right + border-width)
    Content area width: 360px (width - padding-left - padding-right)

    Total width: 502px (margin-left + border-width + padding-left + width + padding-right + border-width + margin-right)
    Content area width: 400px (width)

  2. How will IE6/Win render/handle the text in the following paragraph element (a) in standards mode and (b) in quirks mode? State the color and background-color that will be rendered in both modes.
    body { color: blue; background: yellow; }
    p { color: ff0000; background: white; }

    (a) In standards mode, the text renders in blue. The # is missing, so the color is inherited from the body element.
    (b) In quirks mode, the text renders in red. Even though the # is missing IE reads the hex color and renders it.

    In both modes the paragraph background renders in white. Outside of the paragraph element, text is rendered in blue and the background is yellow. This is because those three colors (blue, yellow, and white) are defined by HTML 4.01 specifications and can be used by name as opposed to RGB or Hex (Basic HTML data types)

  3. Tell what - if anything - is wrong with the following styles:
    1. p { font: arial, verdana, sans-serif; }

      p { font-family: arial, verdana, sans-serif; } Since there is no font-size declaration, the font declaration cannot be used, and the more specific font-family must be used instead.

    2. div { font-size: 12px; line-height: 1.5; }

      This one is fine as is. Ideally, one would want a unit to be clear, but the number value is acceptable, and in this case simply scales, (much like one had put 1.5em)

    3. em { font-style: italics; }

      em { font-style: italic; } Italic not italics.

    4. body { color: #000; background: #ffffff; }

      This one is fine as is.

    5. body { color: transparent; background-color: pink; }

      body { color: fuchsia; background-color: transparent; } Transparent is not a valid color value, but it is valid for background-color, even though it throws a warning. Additionally, "pink" is not one of the 16 predefined colors.

    6. body { color: brown; background-color: transparent; }

      body { color: #5c3317; background-color: transparent; } Same as e in that "brown" is not one of the 16 valid colors in HTML 4.01.

    7. p { font: 1em/1.5em Times New Roman, Times; }

      p { font: 1em/1.5em "Times New Roman", Times, serif; } Any values that contain spaces need to be surrounded in quotes. Also, a generic font-family should always be included in case the user does not have that specific font installed on their machine.

    8. span { border-width: 3 px; }

      span { border-width: 3px; } should be no space between the value and its units

    9. p:first-child span { font-weight: 600; }

      This one is fine as is.

    10. p:first-line span { font-weight: bolder; }

      p:first-line { font-weight: bolder; } Pseudo-elements can only be appended to the last element in a chain and only block elements (hence removing span instead of appending :first-line to it).

  4. I'm having a problem with this document. It doesn't seem to want to validate for CSS. What's wrong? Fix it so that it does validate.

    Type attribute needs to be text/css not css/text. (More generic to more specific: Type followed by subtype)
    Comment code was <!- rather than <!-- (On SGML and HTML)
    Only spaces between multiple values for an attribute (semi-colons tell the browser that the attribute is closed, so there are three values in the paragraph element that refer to no attributes)
    Fixed version

  5. The '#' symbol is commonly called the 'hash symbol,' the 'pound sign' or the '_ _ _ _ _ _ _ _ _ _' What's the word?

    Number sign, octothorpe, there are others, but those are the ones that fit with the number of letters. :)

Jennifer Griner