Week 8 Review questions for CSS class

These review questions cover material from the entire course. This is the required part of Week 8. Please post your answers in the review discussion area via a link to a webpage of your answers or within your post.

The style rule p { left-margin: 2em; } sets the left margin for the paragraph element to 2em. True or False.
False, it should be margin-left, not left-margin.
How would I write code to set the white spaces between words to 3em? Remember that browsers have default spacing.
From the following output

This div has word-spacing:0em and monospace font

This div has word-spacing:1em and monospace font

This div has word-spacing:2em and monospace font

one can see that the last of these (word-spacing:2em) yields 3em of spaces between words – the original space in the text plus two more specified by CSS.

Which of the following properly tiles an image across the entire background of the Web page?

body { background: url(bluetile.jpg) repeat; } 
h1 { background: bluetile.jpg; } 
body { background: url:bluetile.jpg; } 
body {background-repeat: url(bluetile.jpg); }

The first. Two variations would be 1) to replace background with background-image and 2) to drop the word "repeat" since tiling in both horizontal and vertical directions is the default.

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?

display: absolute; tmargin: 140px; 
position: absolute; offset: 140px; 
position: default; offset: 140px; 
position: absolute; top: 140px;

The last one.
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.

A simple embedded style might look like the following

  <style type="text/css">
  <!--

  @media print
  { 
    body 
    { 
        font-size: 12pt;
        color: #000000;
        background-color: #ffffff;
        font-family: 'Times New Roman', Times, Serif;;
    }
  }

  @media projection
  {
    body
    {
        font-size: 28pt;
        color: #ffffff;
        background: #720000;
        font-family: 'Arial Black', Arial, Sans-Serif;
    }
    h1,h2,h3,h4
    {
        color: #ffffcc;
        background: #8c0000;      
    }
    h1
    {
        font-size: 44pt;
    }
    h2
    {
        font-size: 32pt;
    }
    h3,h4
    {
        font-size: 28pt;
    }
  }

  -->
  </style>

You are creating an instructional website. There is a strong possibility that several people accessing your site have visual impairments. What strategy could you use - assuming that they will be using adaptive technology (screen reader, screen reading browser)?
In such cases one should include an aural style which might include controling the volume or pitch. For instance, one increase the volume in places one wants emphasized. If one were providing a set of instructions, one might use changes in pitch to distinguish between actual steps and explanations thereof. And if the subject you are describing uses a lot of acronyms, you can specify that they be read letter-by-letter.

Challenge Questions (optional)

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.)

Where should you place the @import notation?
An @import rule or rules should be placed before any other style whether it is linked in or embedded. It is placed in the head part of the page and looks like the following
```
@import url("my_style.css");
```
It might also specify a media type
```
@import url("my_print_style.css") print;
```
What order will a linked style sheet cascade in?
The style of an element may be located in an external style sheet that is linked in, an embedded style sheet in the head portion of the page in question, or inline – in the style attribute of the specifid element in question. The proximity rule says that the closer style specification wins. So inline beats embedded beats linked in.

Another aspect is that the author's style wins over the reader's style. However, this order (as well as parts of that above) can be turned around by the use of the !important specification.

Finally, if two competing style specification have the same weight by the above rules, then the one encountered later wins.
If you use a percentage value for margin and padding, the percentage is based on the:
```
area of the box 
length of the box 
width of the box 
value you select
```
It is based on width. This is demonstrated by the span below.

It has absolute positon and a left of 50%. Change the browser's height and width to see the effect. It shows that percentages are based on width, which goes for the margin and padding attributes as well.
What are the ten media types for CSS?
According to http://www.w3.org/TR/REC-CSS2/media.html, the ten media types are:
1. all Suitable for all devices.
2. aural Intended for speech synthesizers. See the section on aural style sheets for details.
3. braille Intended for braille tactile feedback devices.
4. embossed Intended for paged braille printers.
5. handheld Intended for handheld devices (typically small screen, monochrome, limited bandwidth).
6. print Intended for paged, opaque material and for documents viewed on screen in print preview mode. Please consult the section on paged media for information about formatting issues that are specific to paged media.
7. projection Intended for projected presentations, for example projectors or print to transparencies. Please consult the section on paged media for information about formatting issues that are specific to paged media.
8. screen Intended primarily for color computer screens.
9. tty Intended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities. Authors should not use pixel units with the "tty" media type.
10. tv Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).