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 page
C. 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 > element
F. 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 below

class=”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.