CSS Flashcards
What are the names of the individual pieces of a CSS rule?
Selector, declaration, property/key, value
In CSS, how do you select elements by their class attribute?
Use .classname (period before the class name)
In CSS, how do you select elements by their type?
Use the element name (h1, p, etc)
In CSS, how do you select an element by its id attribute?
Use a hashtag before the id name (#idname)
Name three different types of values you can use to specify colors in CSS.
RGB, hex codes, color names
What CSS properties make up the box model?
(Width, height,) border, margin, padding
Which CSS property pushes boxes away from each other?
margin
Which CSS property add space between a box’s content and its border?
Padding
What is a pseudo-class?
A modification of a css selector which changes the appearance of elements when the user interacts with them
What are CSS pseudo-classes useful for?
Can apply a hovering effect, can show when an element is being activated, and can show when an element has focus
Name at least two units of type size in CSS.
Pixels, percentages, ems
What CSS property controls the font used for the text inside an element?
Font-family
What is the default flex-direction of a flex container?
Left to right
What is the default flex-wrap of a flex container?
Nowrap (all on one line)
Why do two div elements “vertically stack” on one another by default?
They are block elements
What is the default flex-direction of an element with display: flex?
Left to right
What is the default value for the position property of HTML elements?
Normal flow
How does setting position: relative on an element affect document flow?
It only effects the positioning of the element being positioned, the rest of the flow stays normal
How does setting position: relative on an element affect where it appears on the page?
It moves the element from where it would be in normal flow, shifting it to the top, right, bottom, left
How does setting position: absolute on an element affect document flow?
Only affects the elements being positioned, which is pulled out of the document flow, the rest of the document stays in normal flow
How does setting position: absolute on an element affect where it appears on the page?
It positions it to stay in an area as the user scrolls through the page
How do you constrain an absolutely positioned element to a containing block?
Set the parent element to relative position
What are the four box offset properties?
Top, bottom, right, left
What is a breakpoint in responsive Web design?
A point or threshold in the width of a webpage in which a CSS style is applied
What is the advantage of using a percentage (e.g. 50%) width instead of a fixed (e.g. px) width for a “column” class in a responsive layout?
Percentages are always consistent, whereas fixed widths will vary
If you introduce CSS rules for a smaller min-width after the styles for a larger min-width in your style sheet, the CSS rules for the smaller min-width will “win”. Why is that?
Because that breakpoint is being reached before the larger breakpoint, negating the larger one’s styling
What are the four components of “the Cascade”.
Source order, inheritance, specificity, and !important
What does the term “source order” mean with respect to CSS?
The order in which CSS rules are written in a stylesheet, with the last rule usually being applied if two rules contain the same styling
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
Some CSS properties are set to inherited by default, meaning they are automatically applied to children elements
List the three selector types in order of increasing specificity.
Type selectors, class selectors, id selectors
Why is using !important considered bad practice?
It makes debugging more difficult because it breaks the natural cascading of the stylesheets
What is the affect of setting an element to display: none?
Causes the element to not be dispalyed
