H151 - Review Week 6

  1. The style rule p { left-margin: 2em; } sets the left margin for the paragraph element to 2em.
    1. True
    2. False

    b. The correct directive is margin-left.

  2. How would I write code to set the white spaces between words to 3em?

    p {word-spacing: 2em;}

  3. Which of the following properly tiles an image across the entire background of the Web page?
    1. body { background-image: url(bluetile.jpg); }
    2. h1 { background-image: bluetile.jpg; }
    3. body { background-image: url:bluetile.jpg; }
    4. body {background-repeat: url(bluetile.jpg); }

    a.

  4. Which of the following correctly sets the element's position property to absolute and offsets it from the top of the page by 140 pixels?
    1. display: absolute; tmargin: 140px;
    2. position: absolute; offset: 140px;
    3. position: default; offset: 140px;
    4. position: absolute; top: 140px

    d.

  5. You have been asked to give a presentation at a conference. Your visual presentation is in the form of a website that is projected onto a screen. You are also quite sure that some of those present will want a printed copy of the document. You want to create a presentation that is projected with Arial font, colourful headings and a largish font size. But, for the print version, you would rather the material be optimized for black ink and in a serif (Times New Roman) font at a suitable size for print (10/12 points). Please create a stylesheet that would accomplish this.

    <style type="text/css">
    @media screen, projection {
    body {
     color: #000000; background-color: #ffffff;
     font-family: Arial, sans-serif;
     font-size: 2em;}
    h1, h2, h3 {
     color: #FF0000; background-color: #0000FF;}
    }
    @media print {
    body {
     color: #000000; background-color: #ffffff;
     font-family: "Times New Roman", serif;
     font-size: 1em;}
    }
    </style>

  6. You are creating an instructional website. There is a strong possibility that several people accessing your site are sight-impaired. What strategy could you use - assuming that they will be using a screen reader?

    Create an aural style sheet in addition to the screen style sheet. This will allow users who aren't visually impaired to view your site as intended, and also allow those who are visually impaired access to your information as well.

Challenge Questions (optional)

  1. You can find some help for question #1a and #1b here: http://www.w3.org/TR/REC-CSS2/cascade.html#at-import. (These questions are also covered in your text.)
    1. Where should you place the @import notation?

      In the document level style sheet. It must preceed any other rule sets in the document.

    2. What order will a linked style sheet cascade in?

      Linked style sheets are the last of the author style sheets to cascade in. They follow inline and document style sheets in that order.

  2. If you use a percentage value for margin and padding, the percentage is based on the:
    1. area of the box
    2. length of the box
    3. width of the box
    4. value you select

    c.

  3. How can I test out my aural style sheet to ensure that it works?

    Aside from downloading and installing a screen reader, the only way that I can think of would be to read your document out loud from the source code while paying attention to the style specifics. This wouldn't ensure that your code was valid and would work properly, but it would ensure that everything make sense, and that things are where they're supposed to be.

Jennifer Griner