CSS Flashcards
What are the names of the individual pieces of a CSS rule?
- Selector (element, class or id)
- Declaration Block
- Property & Value (declaration)
In CSS, how do you select elements by their class attribute?
.classname{ }
In CSS, how do you select elements by their type?
elementname { }
In CSS, how do you select an element by its id attribute?
idname { }
What CSS properties make up the box model?
- Border
- Padding
- Margin
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 class applied to an element by the browser in a certain situation
What are CSS pseudo-classes useful for?
To make the website stylistically dynamic based on user interaction
Name at least two units of type size in CSS.
- px
- %
- em - default font size from container
- rem - default font size from doc root
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?
flex-direction: row;
What is the default flex-wrap of a flex container?
flex-wrap: nowrap;
Which axis does the justify-content property apply to?
main-axis (default is x-axis)
Which axis does align-content property apply to?
cross-axis (default is y-axis)
What is the difference between align-content and align-item?
- align-content applies changes to multiple rows
- align-item applies changes to the items within a
single row
Why do two div elements “vertically stack” on one another by default?
Block level elements like div will take 100% width, so they naturally stack
What is the default flex-direction of an element with display: flex?
flex-direction: row
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?
- Relative elements remain in the document flow
- If moved it will still occupy (space wise) the
original spot it was in
How does setting position: relative on an element affect where it appears on the page?
The new position is relative to where it’s block would have been
How does setting position: absolute on an element affect document flow?
It takes the element out of the normal document flow
How does setting position: absolute on an element affect where it appears on the page?
It moves the element based on the first non-static parent element
How do you constrain an absolutely positioned element to a containing block?
- position: relative on the containing block
- position: absolute on the desired elements
What are the four box offset properties?
- top
- bottom
- left
- right
What are the four components of “the Cascade”.
- Source order
- Inheritance
- Specificity
- !important
What does the term “source order” mean with respect to CSS?
Last ruleset will be applied if there are multiple rulesets targeting the same property and value
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
If the style being applied to the parent element is an inheriting property
List the three selector types in order of increasing specificity.
- Type selector
- Class selector
- ID selector
Why is using !important considered bad practice?
Makes debugging more difficult by breaking the natural cascading in your stylesheets
What does the transform property do?
Transform moves the element on it’s x and y axis
Give four examples of CSS transform functions.
- matrix()
- rotate()
- scale()
- skew()
- translate()
The transition property is shorthand for which four CSS properties?
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
transition: margin-right 2s ease-in 0.5s
