CSS Flashcards
What are the names of the individual pieces of a CSS rule?
The CSS Selector, Declaration block, property and value.
In CSS, how do you select elements by their class attribute?
To select by class attribute you use the dot operator e.g. ‘.class’.
In CSS, how do you select elements by their type?
To select an element by type you use it as the selector e.g. ‘h1’.
In CSS, how do you select an element by its id attribute?
To select an element by ID you use ‘#’ e.g. ‘#ID’.
Name three different types of values you can use to specify colors in CSS.
You can specify colors with Hex, rgba(), and keywords.
Hsl() is also an option.
What is a pseudo-class?
A psuedo-class is used to define special states of an element. e.g. ‘:hover’.
What are CSS pseudo-classes useful for?
Pseudo classes are useful for decorating smaller scale, reactive parts of an element.
What CSS properties make up the box model?
The box model properties are: Margin, Border, Padding, and Content.
Which CSS property pushes boxes away from each other?
The Margin property pushes boxes away from each other.
Which CSS property add space between a box’s content and its border?
The Padding property adds space between a box’s content and its border.
Name at least two units of type size in CSS.
Font size can use all ‘length’ units. e.g. ‘em, px, %, pt’.
What CSS property controls the font used for the text inside an element?
The Font-family property controls the font used for an element.
What is the default flex-direction of a flex container?
The default value for flex-direction is ‘row’.
What is the default flex-wrap of a flex container?
The default value of flex-wrap is ‘nowrap’.
Why do two div elements “vertically stack” on one another by default?
Div elements vertically stack because their display type is ‘block’.
What is the default value for the position property of HTML elements?
The default value of position is ‘static’.
How does setting position: relative on an element affect document flow?
Setting the value of position to ‘relative’ will not affect document flow.
How does setting position: relative on an element affect where it appears on the page?
Setting the value of position to ‘relative’ will not affect where it appears on the page.
How does setting position: absolute on an element affect document flow?
Setting the value of position to ‘absolute’ will remove the element from document flow.
How does setting position: absolute on an element affect where it appears on the page?
Setting the value of position to ‘absolute’ will place the element at the top of its container.
How do you constrain an absolutely positioned element to a containing block?
An absolutely positioned element will be constrained to any other container with a value other than ‘static’.
What are the four box offset properties?
The four box offset properties are: top, right, bottom, left.
