Module 04-02 CSS Selectors & The Box Model Flashcards
What kind of elements take up the entire width of a line?
block elements
What kind of elements appear one beside another?
inline elements
What kind of elements appear one beside another but can have their height and width set?
inline-block elements
What is the space inside an element, between its content and border?
Padding
What is the edge of an element?
Border
What is the space outside of an element, between the element and other elements?
Margin
How is an elements space calculated?
Adding content + padding + border + margin
How do you denote a class selector?
period before the class name (i.e. .notice { } )
How do you denote an ID selector?
hashtag before the ID name (i.e. #info { } )
What is the universal selector that denotes defaults for a page?
- { }
How do you denote an attribute selector?
attribute in brackets after type (i.e. input[type] or input[type=text])
How do you denote a pseudo-class selector?
color after the type (i.e. a:hover or input:enabled, etc.)
How is a Combo Combinator used?
Selectors are strung together (i.e. button[type=submit).danger for buttons of type submit that have a class of danger)
How is a Multiple Combinator used?
Multiple elements separated by commas (i.e. button, input[type-checkbox], select)
How is a Descendant Combinator used?
Element inside another separated by space (i.e. div.aside p for any p within a div with class aside)
How is a Child Combinator used?
Elements separated by > (i.e. div.aside > p for any p that is a direct descendent of a div with class aside)
What is the default value for position?
static
Which position value offsets the element from its normal location?
relative, then used with at least one: top, bottom, right, left value to move that many pixels in that direction
Which position value lets you take an element out of the normal flow and place it wherever you want?
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)
Which position value lets you take the element out of the normal flow and place it wherever you want within a parent element?
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)
What length units are fixed to a physical length and generally considered to always be the same size?
Absolute (px)
What length units aren’t fixed and change depending on the context?
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
What is specificity?
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
Order the three selectors from least to most specific
Type, Class, ID
