CSS Level 2

Exam 6

  1. 414px
  2. div#navigate {position:fixed;top:0;left:auto;bottom:auto;right:0;max-width:25%;}
  3. .card {width: 10em; height: 10em;background: silver; border: solid, 1px, black;}
    div#card3{position:absolute; left:2em;top:2em;z-index:3;}
    div#card1{position:absolute; left:0;top:0; z-index:1;}
    div#card5{position:absolute; left:4em;top:4em; z-index:5;}
    div#card2{position:absolute; left:1em;top:1em; z-index:2;}
    div#card4{position:absolute; left:3em;top:3em; z-index:4;}
  4. #container{position:relative;width:400px;height:400px;border:1px,solid,black;}
    #top-left {position:absolute;left:0;top:0; width:50%;height:50%;background:red;}
    #top-right {position:absolute;left:200px;top:0; width:50%;height:50%;background:yellow}
    #bottom-left {position:absolute;left:0;top:200px; width:50%;height:50%;background:grey;}
    #bottom-right {position:absolute;left:200px;top:200px; width:50%;height:50%;background:green;}

Exam 5

  1. Normally the floating boxes should line up to the right of the previous one until there is no more space, then they would float down the first box to the left. But because the following declaration is used : img.curve {clear: left;}, each box is forced to go below the previous floating box on the left.
  2. Well, the only solution I could think of was to give a height value to the div that was equal to or greater than the height of the image. It works but somehow I don't think that's the right answer...
  3. #sidebar {float:right; margin: 0; padding:0; border:1px;}
    #sidebar img {float:left; margin-left: -20px;}
  4. body {border-top: 5px double solid; padding-top: 10px;}
    #info {float:right; width: 21%; margin: 0, 2%,0, 2%;}
    #main {float: left; width: 71%; margin 0, 2%, 0, 2%;}
  5. body {margin: 5px auto; width: 95%}
    #nav {float:left; width:22%; margin-bottom: 15px;}
    #main {float: right; width: 75%; margin-bottom: 15px;}
    #picture {float:left; width 22%; margin-bottom: 15px;}
    #footer {clear:both; width: 100%;}

Exam 4

  1. There is no difference.
  2. The difference between the values of font-size and line-height is the leading, When split in two it gives the half-leading. The half-leading is added on top and bottom of the content area to determine the inline box of a line. Leading is applied to non-replaced elements only.
    1. 16px
    2. 12px
    3. 16px from the baseline
    4. 30px
  4. An image is by default a replaced element in a inline content, so it will sit by default on the baseline of the line box. To get rid of the gap which is the difference between the baseline and the bottom of the line box, we can use vertical-align :bottom, to make it sit on the bottom of the line box #headmast img {vertical-align: bottom;}.

Exam 3

  1. Calculate the specificity of each of the following selectors. Please format your answer in either hyphen- or comma-separated notation (e.g., 0-0-0-0 or 0,0,0,0).
    1. ul li em : 0,0,0,3
    2. body#home *.example : 0,1,1,1
    3. p.footer a:hover : 0,0,2,2
    4. h1 + * p : 0,0,0,2
    5. body > .aside > ul a:visited : 0,0,2,3
    6. a:link:hover img[alt] : 0,0,3,2
    7. div[title] + * #que > li : 0,1,1,2
    8. p[class~="help"]:first-child:first-line : 0.0,2,2
    9. * + * > * * > * + * * : 0,0,0,0
    10. html:lang(en) body div.ii table tr td p:first-letter : 0,0,2,8

  2. Explain why HTML-based presentational hints (e.g., font) are given a specificity of 0 (zero) in CSS2.
    Because CSS declarations in the author style sheet always override them?
  3. Given the following document markup, list the final set of declarations which apply to each of the three numbered elements below. Consider the specificity of selectors, possible inheritance, and the effects of inline styles.
    1. Allow me to make my main point here :
      style="font-weight: bold; font-style: italic;"
    2. the second point :
      h1[id|="pg"] + * + div {font-weight: normal;}
      li {color: maroon;}
    3. copyright somebody :
      div {font-weight: bold;}

Exam 2

  1. Describe the following selectors
    1. Any a element with a class attribute that contains the word external and has been visited.
    2. Any a element that hasn't been visited and is being hovered.
    3. Any strong element which is a descendant of any element with a href attribute which is focus.
    4. Any a element which hasn't been visited and is a first child of a descendant of a td element which class is navbar.
    5. Any li element that is a first child and a desendant of a ul element directly following a h1 element that is a first child of a descendant of a div element.
    6. The first displayed letter of any element which is in a language or locale whose identifier equals fr or begins with fr-.
    7. The first displayed line of any element which is a child of any element which is a descendant of a div element directly following an h1 element.
    8. Any p element directly following any element with a src attribute and is a descendant of a div element directly following a p element, direcly following an h2 element.
    9. Any em element with a class attribute and is a child of a span element which is a descendant of a td element with a class attribute that equals negative.
    10. Any td element with a class attribute that contains the word total, and is a descendant of a tr element with a class attribute that equals odd subsummary and is a descendant of a table which is a first child of another element.

  2. Explain the difference between a pseudo-class and a pseudo-element. List at least three of each type of selector.

    To attach style to an element, it has to be part of a document tree, pseudo-elements and pseudo-classes enable formatting based on information not included in a document tree.

    Pseudo-elements refers to elements that do not really exist and as such are not accessible through normal document grammar or are outside the source document.
    Examples are: :first-letter, :first-line or :before
    Pseudo-classes refers to classes that do not really exist and are based on elements carateristics other than their name, attributes or content.
    Examples are: :first-child, :link or :hover

  3. Explain what, if anything, is wrong with the following selectors being applied to an HTML document. Browser limitations should not figure into your answers.
    1. pseudo-elements can only appear at the end of a selector chain, so [class="aside"]:first-line cannot be followed by em.
    2. There is an element missing between + and >.
    3. There should be a tilde-equal sign before "white" and not a -=.
    4. Can't see anything wrong with that one...
    5. :hover cannot exist on it's own, it should be a:hover or *:hover.

  4. For each question, write a single rule (without using a grouped selector) to accomplish the given task with the markup that follows
    a. Uppercase the word "so" in the first paragraph
    h1 + p strong:first-child {text-transform: uppercase;}
    b. Color green the word narcissistic.
    div.rant ul li:first-child + li + li {color:green;}.
    c. Make the link "my cat" purple when it's been visited, using a selector that begins with div and that contains a :first-child somewhere within it.div.rant strong:first-child + a:visited {color:purple;}
    d. Boldface the first letter of the paragraphs beginning with "Welcome to" and "The other day" using a single selector.
    Sorry, I can't figure this one out...This is the closest I can get: body > ul + *:first-letter {font-weight:bold;}
    e. Uppercase the strong elements containing the text "lo" and "really" (but no others) using a single selector.
    I'm afraid I can't figure this one out either...this the closest I can get: *:first-child > *:first-child {text-transform: uppercase;}

Exam 1

  1. Describe the following selectors
    1. A li element that is a descendant of a ul element, that is a descendant of div.aside element, that is a descendant of a body element.
    2. A table element directly following a div element.
    3. A table element that is a child of a div element.
    4. Any element directly following an h1 element.
    5. A p element directly following a p element directly following any element that is a descendant of a div element.
    6. A li element which class is move and is a child of an ul element directly following a p element which id is intro and that is directly following a h1 element.
    7. An a element that is a child of any element that is a descendant of a li element that is a child of an ol element that is a descendant of a li element that is a child of an ul element.
    8. Any element directly following a p element directly following any element that is a child of a div element directly following a p element, directly following an h1 element that is a child of a body element.
    9. Any element that is a descendant of a li element that is a child of an ul element that is a descendant of div element that is a child of a td element that is a descendant of a table element directly following any element directly following a h3 element directly following any element that is a child of any element that is a descendant of a body element.
    10. Any element?
  2. Briefly explain the difference between div * and div*
    The first one is correct and indictaes that div is an ancestor of an element. The second one doesn't mean anything.
  3. Briefly explain the difference between td > ul and td>ul.
    There isn't any.
  4. Briefly explain the difference between *#sidebar and #sidebar.
    There isn't any.
  5. Write rules to accomplish the following tasks.
    a.Put a border around the "rant."
    div.rant {border-style: solid; border-width: thin; border-color: green;}
    b.Strikethrough all of the em elements found in the "rant."
    div.rant em {text-decoration: line-through;}
    c.Make the word "really" in "really lame" red.
    div.rant > ul > li > em {color: red;}
    d.Underline the word "there" in "So there."
    div.rant >p em {text-decoration: underline;}
    e.Boldface the mailto: link near the end of the page.
    p > a {font-weight: bold;}
    f.Boldface the paragraph "Have a nice day!"
    body > p + p {font-weight: bold;}
    g.Set a left margin of 1.5em for the sub-category lists for both pictures and poetry.
    body > ul >li > ul > li {margin-left: 1.5em;}
    h.Set a left margin of 2em for only the poetry sub-category list.
    body > ul > li + li > ul > li {margin-left: 2em;}
    i.Uppercase the word "beer."
    body> ul ul > li+ li + li > a {font-variant:small-caps;}
    j.Set a border around the last three category list items near the beginning of the page, without having that change carry into the sub-category lists. (I'm not sure I understand what you mean, but this is the closest I could come up with)
    body> ul > li+li {border-style:solid; border-width: thin; border color:green;}