CSS Flashcards
What are the names of the individual pieces of a CSS rule?
property, value, declaration block, selector
In CSS, how do you select elements by their class attribute?
you would use the dot and the classname
In CSS, how do you select elements by their type?
you would just type the element name
In CSS, how do you select an element by its id attribute?
you would use the hashtag and then the class name
Name three different types of values you can use to specify colors in CSS.
hex code
color name
rgb
What CSS properties make up the box model?
border
margin
padding
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 pseudo class is a class that allows you to chnage the appearance of a element when the user interacts with it
What are CSS pseudo-classes useful for?
when you have to submit a form or hover over something before submitting
Name two types of units that can be used to adjust font-size in CSS.
px
units
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?
the default flex-direction is row
What is the default flex-wrap of a flex container?
n0-wrap
Why do two div elements “vertically stack” on one another by default?
they are block elements
What is the default flex-direction of an element with display: flex?
row
What are the names of the individual pieces of a CSS rule?
css selector, css property, css value
In CSS, how do you select elements by their class attribute?
you would add a period and then the class name
Example: .title
In CSS, how do you select
elements by their type?
you would just type out the name of the element
In CSS, how do you select an element by its id attribute?
using the hashtag then the name of what you want to select
fixed positioning vs relative
relative
The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static.
This value creates a new stacking context when the value of z-index is not auto. Its effect on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.
absolute
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.
flex-wrap
nowrap (default): all flex items will be on one line
wrap: flex items will wrap onto multiple lines, from top to bottom.
wrap-reverse: flex items will wrap onto multiple lines from bottom to top.
justify-content
flex-start (default): items are packed toward the start of the flex-direction.
flex-end: items are packed toward the end of the flex-direction.
start: items are packed toward the start of the writing-mode direction.
end: items are packed toward the end of the writing-mode direction.
left: items are packed toward left edge of the container, unless that doesn’t make sense with the flex-direction, then it behaves like start.
right: items are packed toward right edge of the container, unless that doesn’t make sense with the flex-direction, then it behaves like start.
center: items are centered along the line
space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line
space-around: items are evenly distributed in the line with equal space around them. Note that visually the spaces aren’t equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies.
space-evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal.
flex
This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. The default is 0 1 auto, but if you set it with a single number value, like flex: 5;, that changes the flex-basis to 0%, so it’s like setting flex-grow: 5; flex-shrink: 1; flex-basis: 0%;.
