77. Which statement does NOT apply to the pixel font sizing method? (2 points)

1. Pixel measurements are not interpolated, converted, or relative to the user agent's default font-size setting.
2. Technically, pixels are relative units, but from a practical standpoint, pixels are absolute because they are only dependent on the display device.
3. Pixels should not be used for specifying left/right padding/margins
4. IE6/Win has an accessibility issue when rendering documents that use pixels for font sizing.
5. Pixel measurements are useful when mixing text and images.

This question is being discarded, for so many reasons. If you missed this question, let me know and I will add two points to your score.

Of the 5 who answered this question, no one got it right. Primarily because the exam had B as the correct answer when it should have been C.

The question, while valuable information to know, is too darn complicated and flawed in a number of other areas. This question relates to pixel sizing, yet the correct answer is found in the padding lecture pages and not in the font lecture materials. One would think that the correct answer would be found in the subject area being asked about.

Now I have no aversion to asking a NOT type question, but to have NOT in the question and NOT in the answer(s), well... this question is just too complicated.

In the future, this question will be deleted or re-written so that it is specific and easier to understand. And the lecture materials will be updated so that important concepts are included with the appropriate topic, and perhaps duplicated in other related topics.

35. Which rule styles every A tag that is assigned the EXAMPLE class is the color red. (2 points)

1. .example a { color: red; }
2. #example a { color: red; }
3. a .example { color: red; }
4. a #example { color: red; }
5. a.example { color: red; }
6. a#example { color: red; }

The correct answer here is E but almost half of the respondents selected A. If you missed this question, let me know and I will add two points to your score.

Now this is an excellent, important and pertinent question. But it does require an understanding of the difference and implications of A versus E. And the question is very specific in what it asks ... note the questions asks about A tags which are assigned the "example" class.

For the A answer, this means that ANY element which has been assigned the class of "example" will have links within styled in the color of red. This means that a block level element like DIV or P or LI must have the class of "example" assigned to it for its links to be red.

E on the other hand is specific to individual links. Any A tag which is assigned the class of example would then be red.

The A answer affects all links within a block level element, while E affects only individual links which have been assigned the "example" class, regardless of which block element the link is within. This is an important difference and one CSS developers need to understand. This might well be a question a prospective employer asks to see if the candidate understands selectors and specificity.

The reason that I will give you credit if you did not answer this properly is because as we analyzed the results and the lecture materials, we came to the conclusion that while this concept was covered with DIV elements it was not covered in depth when dealing with classes... even though there is no real difference between the two.

The topic is critical and next quarter we will add a topic which addresses and compares DIVs vs Classes in greater depth:

.class element
element.class
#id element
element#id

116. For layout purposes, it is advisable to use absolute units for right/left padding/margins, and relative units for the top/bottom padding/margins. (2 points)

• True
• False

One-third of the respondents answered incorrectly here. If you missed this question, let me know and I will add 2 points to your score.

The correct answer is TRUE.

This concept and logic is covered in detail on page 107 of the Stylin' textbook.

After debating the question, we decided that the lecture materials are lacking in an explanation and concrete code examples to expand upon this point. Next quarter the lecture materials will include this.

9. Which one of the following contains a valid identifier? (2 points)

1. <p class="2ndExample">
2. <p id="#ExampleName">
3. <p name="example name">
4. <p class="_example_name1">
5. <p id="2nd_example">

The correct answer is D. If you missed this question, let me know and I will add 2 points to your score.

The Stylin' textbook does have an explanation for naming identifiers and this does point out that spaces are not allowed. However it states that browsers MAY have a problem with names which start with numbers.

The lecture materials do not cover this concept and will be updated for next quarter.

The rules for naming identifiers are specific - they must be one-word with no spaces, and they must start with a LETTER!

15. What is the correct code for attaching an external CSS style sheet to an XHTML Strict document? (3 points)

1. <link href="example.css" type="text/css' rel="stylesheet" media="print" />
2. <link rel="stylesheet" type="text/css" media="printer" href="example.css" />
3. <link media="print" type="text" href="example.css" rel="stylesheet" />
4. <link href="example.css" type="text/css" media="print" rel="stylesheet">
5. <link type="text/css" rel="stylesheet" media="print" href="example.css" />

We wondered why so many people got this wrong. Well, it is because B, C and E are valid while A and D have obvious syntax errors. If you got this wrong, let me know and I will add 3 points to your score.

Sorry about this one !!

19. Which of the following element tags _CANNOT_ contain an embedded div tag? (1 point)

1. p
2. body
3. li
4. div
5. dl

One person got this wrong, and if you did, let me know and I will raise your grade by 1 point.

The assumed answer was A as you cannot insert a DIV inside a P tag. However E is also false. You cannot insert a DIV tag inside a DL tag. You can however insert a DIV into the DD or DT tags which are block-level tags within a definition list.

6. If the markup does not pass HTML validation, the results of CSS validation are still dependable? (1 point)

1. True
2. False

I am very surprised that 40% of respondents got this question wrong!

First of all, if the markup is not valid, the CSS validator will alert you to this fact and will NOT even attempt to validate the CSS!

The correct answer is FALSE because you cannot then validate the CSS.

The first step is to always validate the markup. If the markup is invalid, how can then CSS work accurately and appropriately for markup which is not correct... well, it cannot!

I always validate the CSS first as a time-consuming step. Why bother validating the markup when the CSS validator will alert me to invalid markup. Of course I have to then go fix my markup before I move on.

30. Which color value will NOT validate? (2 points)

1. #2D84C2
2. brown
3. rgb(152, 28, 77)
4. #F03
5. rgb(77%,33%,98%)

While none of the questions were _intended_ to be tricky or subtle, this question has several considerations.

The correct answer is B for "brown" which is not one of the standard 16 basic colors supported by the W3C and standard XHTML.

Now I agree that this is probably NOT something we would just know unless of course we had validated a page and encountered this error, or looked this up in an appendix of a book... which was not expected in an exam!

However, brown is the only answer which could be incorrect in that all of the other answers are valid CSS methods for specifying color values. Now granted, most of use #000000, or #000, or perhaps a supported color name like blue. But, specifying colors in RGB format is supported both by percentage values and by index values.

And this was covered in the text as well as the lecture pages for specifying color values.

Developers need to understand what options are available to them for any property. Now I grant you that I too would have to look up the syntax for using RGB values, but a prospective employer who typically uses RGB values will probably expect you to at least recognize that these values are available, even if you have to look up the syntax. We all look up syntax as we cannot be expected to memorize everything. But we need to be aware of what set of values can provided for any specific property, whether we choose to use them as our favorites or not.

81. In the code below, what would be the font size of the p tag. Assume the baseline is 100% or 16 pixels. (2 points)
 
   #top_head { font-size: 75%; }
   p { font-size: 75%; }
 
   <div id="top_head"<
   <h3 CSS for Design </h3<
 
   <p> This page contains the materials needed for Internet Technologies - COIN 65 </p>
   </div>

1. 75%
2. 12px
3. 9px
4. 16px

The correct answer here is C.

When using relative or percentage values for a base font font-size, we must remember that font-size inherits that relative value. This means that nested elements defined with a different percentage value will be smaller than than that of the base measurement.

In this case, the base size is 100% or 16px, which all elements inherit.

The DIV of top_head is 75%, and the P tag within that div is also 75%. This results in the calculation for the paragraph as:

16px (Base) * .75 (DIV) * .75 (P) = 9px

I realize that this might seem complicated, yet it is critical to understand when you employ percentage or relative values when setting the base value for a page(s). Nested elements, if also defined as a percentage will inherit the base value multiplied by a smaller value. Fortunately, Pixie and Firebox help us by displaying the values of these inherited properties.

111. If the goal is to center the DIV itself, ignoring the text alignment within the box, you would: (1 point)

1. Use align="center" for the DIV.
2. Set the value of the text-align property of the DIV to center.
3. Set the margins of the DIV so it is centered.
4. Include the DIV inside a table or table cell so the DIV is centered.

There seems to always be a question about aligning the text content within a block-level element and the alignment of the block-level element itself.

A and D here are not correct because they are HTML attributes and not CSS.

Content within a block-level element can be aligned with the text-align property, which has nothing to do with the alignment of the element which contains the content.

To center a block-level container, you would set the left-right margins of the block-level element. The easiest way to do this is to set a left/right margin value for the DIV as such:

The correct answer is C and can be accomplished with:

    div #header { margin-left: auto; margin-right: auto; }

This was covered in the week 2 home page update assignment which asked you to center the DIV which contained your links to labs and assignments.

118. Block level elements ALWAYS follow one another in sequence down the page. (2 points)

1. True
2. False

While there were no really specific and detailed questions regarding positioning from week 6, if one did the homework 6 exercise, or at least read the week 6 materials, it should seem obvious that elements in CSS can be positioned such that they can be positioned outside the normal default of the flow... in other works, not sequential down a page.

The correct answer is TRUE FALSE.

128. An element's background color will cover the entire element box to its outer edges. (1 point)

1. True
2. False

This answer is false. Remember that the margin area of a box is not visible. So even though the margin area is part of a box, margins are not visible and any background color assigned to a box will only be visible in the "visible" portions of the box.... the width and padding areas, but not the margin area.

141. Which of the following is correct? (2 points)

1. background-color: inherit;
2. padding-top: 25 px;
3. text-transorm: uppercase;
4. text align: center;
5. margins: 2em 1em 0.5em;

There were a number of similar questions like this one. The correct answer is A.

Are these syntax-type questions picky? Absolutely. Should you be able to point-out the mistakes, yes. Will a validator flag the incorrect statements as errors, yes. If there are errors in the syntax, will the page render properly... probably not.

B is incorrect because there is a space between the numerical value and the standard of measurement. C is incorrect because "transform" has been misspelled. D is incorrect because the property name is text-align. And E is incorrect because the property name is margin, not marginS.

75. If you use physical units for font-sizing, the displayed font size will always precisely match the specified measurement when rendered on the user's display (1 point)

1. True
2. False

The answer here is false because an agent goes through a process in terms of what it can actually display.

Regardless of whether a font-size value is specified in an absolute value such as pixels or a relative value like em, a browser (any agent) will have to parse that value and perhaps adjust it to what is reasonable for that specific to display. There is no guarantee that your specified value will be the "actual" value displayed.

This is covered in week 4 which describes the process and defines "specified values" versus "computed values" versus "actual values".

Fortunately tools like Pixe and Firebug can show you the eventual end-result, but you cannot assume that your specified values will be "precisely" match what you specified without adequate testing.