CSS Flashcards
(35 cards)
What are the names of the individual pieces of a CSS rule?
first part is a selector
followed by opening curly brace of the declaration block
followed by the declaration (property then value)
followed by closing curly brace of the declaration block
In CSS, how do you select elements by their class attribute?
put a dot “.” in front of the class name when declaring the selector
In CSS, how do you select elements by their type?
put just the element name as the selector
In CSS, how do you select an element by its id attribute?
put a hash (#) symbol in front of the id
Name three different types of values you can use to specify colors in CSS.
RGB
hexcode
name of color
What CSS properties make up the box model?
Margin
border
padding
height
width
Which CSS property pushes boxes away from each other?
margin
Which CSS property adds space between a box’s content and its border?
padding
What is a pseudo-class?
a keyword added to a CSS selector that species a special state that the selector is in
What are CSS pseudo-classes useful for?
styling of elements in relation to external factors and in relation to the document tree
ie change appearance of elements when a user interacts with them
Name two types of units that can be used to adjust font-size in CSS.
px
em
percent (%)
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 (left to right)
What is the default flex-wrap of a flex container?
nowrap (meaning all flex items will try to be kept on one line)
Why do two div elements “vertically stack” on one another by default?
because they are block elements meaning they start on a new line and take up that entire line
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 (each block level element sits on top of the next one.)
How does setting position: relative on an element affect document flow?
it does not affect the document flow, relative position only affects the position of the element.
ie you move the element and it will shift over to wherever you tell it to without shifting any surrounding items
How does setting position: relative on an element affect where it appears on the page?
it shifts the targeted element a certain distance away from where its original position would have been in the normal flow
How does setting position: absolute on an element affect document flow?
absolute takes the element out of the normal flow and shifts the next element into its original spot.
How does setting position: absolute on an element affect where it appears on the page?
it will either lay on top or behind the surrounding elements.
How do you constrain an absolutely positioned element to a containing block?
set the position of the containing block to “relative”
What are the four box offset properties?
top
right
bottom
left
What are the four components of “the Cascade”
Source order
Inheritance
specificity
!important