Module 04-02 CSS Selectors & The Box Model

Question 1

What kind of elements take up the entire width of a line?

Answer 1

block elements

Question 2

What kind of elements appear one beside another?

Answer 2

inline elements

Question 3

What kind of elements appear one beside another but can have their height and width set?

Answer 3

inline-block elements

Question 4

What is the space inside an element, between its content and border?

Answer 4

Padding

Question 5

What is the edge of an element?

Answer 5

Border

Question 6

What is the space outside of an element, between the element and other elements?

Answer 6

Margin

Question 7

How is an elements space calculated?

Answer 7

Adding content + padding + border + margin

Question 8

How do you denote a class selector?

Answer 8

period before the class name (i.e. .notice { } )

Question 9

How do you denote an ID selector?

Answer 9

hashtag before the ID name (i.e. #info { } )

Question 10

What is the universal selector that denotes defaults for a page?

Answer 10

• { }

Question 11

How do you denote an attribute selector?

Answer 11

attribute in brackets after type (i.e. input[type] or input[type=text])

Question 12

How do you denote a pseudo-class selector?

Answer 12

color after the type (i.e. a:hover or input:enabled, etc.)

Question 13

How is a Combo Combinator used?

Answer 13

Selectors are strung together (i.e. button[type=submit).danger for buttons of type submit that have a class of danger)

Question 14

How is a Multiple Combinator used?

Answer 14

Multiple elements separated by commas (i.e. button, input[type-checkbox], select)

Question 15

How is a Descendant Combinator used?

Answer 15

Element inside another separated by space (i.e. div.aside p for any p within a div with class aside)

Question 16

How is a Child Combinator used?

Answer 16

Elements separated by > (i.e. div.aside > p for any p that is a direct descendent of a div with class aside)

Question 17

What is the default value for position?

Answer 17

static

Question 18

Which position value offsets the element from its normal location?

Answer 18

relative, then used with at least one: top, bottom, right, left value to move that many pixels in that direction

Question 19

Which position value lets you take an element out of the normal flow and place it wherever you want?

Answer 19

fixed, then used with at least one: top, bottom, right, left value to move that many pixels away from those edges (like sticking it to the glass above a piece of paper)

Question 20

Which position value lets you take the element out of the normal flow and place it wherever you want within a parent element?

Answer 20

absolute, then used with at least one: top, bottom, right, left value to move that many pixels away from those edges (like sticking it to a piece of paper under glass)

Question 21

What length units are fixed to a physical length and generally considered to always be the same size?

Answer 21

Absolute (px)

Question 22

What length units aren’t fixed and change depending on the context?

Answer 22

Relative (i.e. em - relative to the font size of the parent element or rem - relative to the font size of the root element or percentage - relative to the same measurement of the parent element

Question 23

What is specificity?

Answer 23

Special rules that tell a browser what rules should apply to what elements - in the order they’re given (last takes precedence, aka cascading) - and with regards to the more specific a rule is, the higher its priority

Question 24

Order the three selectors from least to most specific

Answer 24

Type, Class, ID