CSS Flashcards
(39 cards)
What are the names of the individual pieces of a CSS rule?
A ruleset has a selector and a declaration block
A declaration block consists of at least 1 declaration
A declaration is one property and one value
In CSS, how do you select elements by their class attribute?
“.className”
In CSS, how do you select elements by their type?
Just state it
In CSS, how do you select an element by its id attribute?
“#elementId”
Name 3 different types of values you can use to specify colors in CSS.
- hexadecimals
- colors
- RGB
What CSS properties make up the box model?
- margin
- border
- padding
What 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?
Keyword added to CSS selectors to target elements under certain states
What are CSS pseudo-classes useful for?
Helps with responding to users, making the page feel more interactive
Name 2 types of units that can be used to adjust font-size in CSS.
- px
- em
What CSS property controls the font used for the text inside the element?
Font-family
What is the default flex-direction of a flex container?
Row, which means items will be arranged horizontally from left to right
What is the default flex-wrap of a flex container?
No-wrap, which means all items will fit on one line
Why do two div elements “vertically stack” on one another by default?
Div elements are block elements
What is the default flex-direction of an element with display:flex?
Row (left to right)
What is the purpose of the “container” class in the layout class system?
Holds the rows and columns of the page layout. Generally contains ‘max-width’ and ‘margin’
What is the purpose of the “row” class in the layout class system?
Sections off vertical chunks of content in the page
Row class contains display: flex
Contains column
What is the purpose of the “column” class in the layout class system?
Sections off horizontal chunks of content in the page
Column class contains width value
Can contain rows (which could contain further columns)
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 affect document flow
How does position relative on an element affect where it appears on the page?
It doesn’t affect where it appears, but the element can be shifted from that position using ‘top’, ‘bottom’, ‘left’, ‘right’
How does setting position:absolute on an element affect document flow?
The element is taken out of the document flow and other elements act as if it wasn’t there
How does setting position:absolute on an element affect where it appears on the page?
Once the other elements are in place, the absolute element that was taken out of place is now relative to the first non-static parent
If there is no non-static parent, the element is positioned relative to its containing block
