CSS Flashcards
What are the names of the individual pieces of a CSS rule?
Selector and Declaration Block
In CSS, how do you select elements by their class attribute?
.class {
}
In CSS, how do you select elements by their type?
type {
}
In CSS, how do you select an element by its id attribute?
id {
}
Name three different types of values you can use to specify colors in CSS.
rgb(), #hexadecimal, name & hsl()
What CSS properties make up the box model?
width: ;
height: ;
padding: ;
border: ;
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 keyword used in selectors to specify special states of the targeted element(s), such as
:hover,
:checked,
:visited
What are CSS pseudo-classes useful for?
Allows you to apply style to a element not only in relation to the content of the document tree, but also in relation to external factors.
Name two types of units that can be used to adjust font-size in CSS.
px,
em,
pt
What CSS property controls the font used for the text inside an element?
font-family: ;
. column-full {
width: 100%;
}
on line 1 we have a new css rule set with a selector for the column-full class, and then the opnening curly braces for the declaration block;
on line 2 we have a width property with the value of 100%:
on line 3 we have the closing curly braces for the declaration block.
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?
Since they are block-elements, they occupy the full widht of their line and push to the next one any other element.
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?
position: static;
How does setting position: relative on an element affect document flow?
it doesn’t.
How does setting position: relative on an element affect where it appears on the page?
it doesn’t.
How does setting position: absolute on an element affect document flow?
it removes it from the flow, making the other elements to rearrange themselves.
How does setting position: absolute on an element affect where it appears on the page?
the element appears on the top-left corner of it’s containing block
How do you constrain an absolutely positioned element to a containing block?
by having some non-static ancestor block around it
What are the four box offset properties?
top,
bottom,
left,
right