IS 337: Website Administration

Quiz #3

  • CSS box model
    • Calculating sizes of content, padding, border, and margin edges
    • One-, two-, and four-argument versions of properties like padding.
    • Collapsing margins.
  • CSS positioning
    • relative, absolute, fixed positioning
    • left, right floating
    • clearing floats
  • CSS layouts
    • layout types: fixed-width, liquid, elastic, elastic-liquid
    • describe how to two a two-column layout by floating columns
  • Images
    • src, alt, height, width
    • Image types: GIF, PNG, JPEG. When and why.

Example Question

Here's the box-model question from last year's quiz:

Consider this XHTML and CSS:

<p id="motto">Never let them see you sweat.</p>

p#motto {
  margin: 10px;
  border-width: 1px 2px;
  padding: 3px 4px 5px 6px;
  width: 20px;
  background-color: #FF00AA;
  color: rgb(10, 128, 255);   /* sets the text color */
}
  • What is the total width of the paragraph element in the browser? (Show your work for partial credit.)
  • In the diagram below, label the border area, the content area, the margin area, and the padding area.
  • In the diagram below, indicate the length of each of the thirteen dotted lines (none drawn to scale).
box model

Creative © 2007 Calvin College and Jeremy D. Frens.
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License.