Intro to CSS

Question 1

How is the following style rule selector interpreted by the browser?div, p { width: 50px; }

Answer 1

Apply associated style to all div and p elements

Question 2

What are the two parts of a style rule?

Answer 2

the selector and definition

Question 3

How are multiple styles separated

Answer 3

”;” character

Question 4

True or False: a class attribute for an element can have multiple classes

Answer 4

True

Question 5

True or False: the order of classes specified in a class attribute for an element matters in determination of CSS precedence

Answer 5

False

Question 6

True or False: the style attribute of an element can have multiple rules defined

Answer 6

True

Question 7

For a given style rule, e.g. the height of an image, order the precedence of the following:A. rule defined by element selector at the bottom of the < body > element B. rule defined by class selector at the bottom of the pageC. rule inside style attribute of an element D. rule with id selector inside < style > tag at the top of < body >E. rule with element selector inside external style sheet in < head > elementF. rule defined by id selector defined inside an external sheet inside the < head > element

Answer 7

C, D, F, B, A, E

Question 8

What are the two guidelines to follow when determining CSS precedence?

Answer 8

specificity then order, i.e. more specific wins and when two rules have the same level of specificity, the order wins

Question 9

Given the class attribute belowclass=”blank non-blank”do the classes “blank” and “non-blank” have the same specificity, or if not, which one is more specific–the first or last?

Answer 9

Same specificity

Question 10

How is the following style rule selector interpreted by the browser?img.framed { width: 50px; }

Answer 10

all < img > elements who also have a class framed

Question 11

What is the difference between the following two style rule selectors?ul li { margin: 0 0 5px 0; }ul > li { margin: 0 0 5px 0; }

Answer 11

The first selector (space) is a descendant selector and will select ANY < li > at ANY level inside the < ul >, which means it will affect embedded lists.The second selector (>) is a child combinator selector and will only select < li > elements that are direct children of the < ul >, which means embedded lists will not be affected.

Question 12

What are the 3 ways we can apply style rules to a document? (There is a 4th we did not cover.)

Answer 12

1. style attribute
2. embedded < style > element
3. external CSS style sheet