CSS Flashcards
What CSS properties make up the box model?
Margin, Padding, and border
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?
It is a keyword added to a selector that specifies a special state of the selected element(s)
What are CSS pseudo-classes useful for?
Add functionality
Name two types of units that can be used to adjust font-size in CSS
Px, Ems
What CSS property controls the font used for the text inside an element?
font-family property
What is the default flex-direction of a flex container?
Row
What is the default flex-wrap of a flex container?
Nowrap
Why do two div elements “vertically stack” on one another by default?
Because its a block element
What is the default flex-direction of an element with display: flex?
Row
What are the three primary components of a page layout? (Which helper classes do you need?)
Container, row, and column
What is the minimum number of columns that you should put in a row
1
What is the purpose of a container?
To “contain” the entire layout and give the whole layout a minimum width. Make the layout organized.
What is the default value for the position property of HTML elements?
position: static;
How does setting position: relative on an element affect document flow?
It would not affect
How does setting position: relative on an element affect where it appears on the page?
THere is no inherit change
How does setting position: absolute on an element affect document flow?
Remove from the document flow.
How does setting position: absolute on an element affect where it appears on the page?
It depends on the non-statically positioned parent it will position itself against and any box offset properties
How do you constrain an absolutely positioned element to a containing block?
Use the position: relative property in the containing block
What are the four box offset properties?
Top, bottom, left, right
The transition property is shorthand for which four CSS properties?
transition-delay: 250ms;
transition-duration: 2s;
transition-property: all, height, color;
transition-timing-function: linear;
What is a breakpoint in responsive Web design?
The point in which the CSS updates for us. Ex: if the screen gets to 500px, the element changes its width
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?
It allows them to grow and contract with the web page as it moves between the break points.
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 its the final one in the source order. So for the media query, its better to start from the smaller width to the bigger ones. (ex: min-width: 576px)
