CSS Flashcards
Names of the CSS rule pieces:
- Selector
- Opening/ closing braces
- Properties
- Property values
How do you select elements by their class attribute?
You place a .class in the selector
How do you select elements by type
you place the element type in the selector position
how do you select an element by it’s ID?
Use #idName
Name three types of values to specify colors:
hex numbers, rgba, and specific color names
What CSS properties make up the box model?
Margin, borders, padding, content size. width height
Which CSS property pushes boxes away from each other?
margin.
Which CSS property adds space between a box’s content and it’s border?
padding.
What is a psuedo-class?
A psuedo-class is a keyword added to a selector that specifies a special state of the selected element.
psuedo-class used for?
It’s helpful for making elements on your page respond to interaction
Name two units of font size:
em, rem, px.
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?
row
What is the default flex-wrap of a flex container?
no-wrap
Why do two div elements “vertically stack” on one another by default?
div elements are block elements that do not share lines
What is the default flex-direction of an element with display: flex?
row
What is the default value for the position property of HTML elements?
static
How does setting position: relative on an element affect document flow?
it does not interrupt flow but the element remains in the flow
How does setting position: relative on an element affect where it appears on the page?
It appears relative to its original static position.
How does setting position: absolute on an element affect document flow?
It removes it from the flow and places it in an exact position.
How does setting position: absolute on an element affect where it appears on the page?
It will place an element exactly where you want it, regardless of whether it clashes with other elements.
How do you constrain an absolutely positioned element to a containing block?
the nearest non static ancestor element will contain and absolute element. Create a block with relative positioning and it will serve as a container.
What are the four box offset properties?
top, bottom, left, and right
What are the four components of “the Cascade”.
Importance, specificity, source order, proximity
What does the term “source order” mean with respect to CSS?
The order property is designed to lay the items out in ordinal groups. What this means is that items are assigned an integer that represents their group. The items are then placed in the visual order according to that integer, lowest values first. If more than one item has the same integer value, then within that group the items are laid out as per source order.
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
you can put two element in the selector group. without a comma, it selects the child element
List the three selector types in order of increasing specificity.
.class, #id, inline
Why is using !important considered bad practice?
It overrides the other classes and ID’s. It makes debugging more difficult because it breaks normal css.
