CSS Flashcards
What are the names of the individual pieces of a CSS rule?
declaration block, selector, property, value
In CSS, how do you select elements by their class attribute?
.name of the class
In CSS, how do you select elements by their tag name?
name of the tag
In CSS, how do you select an element by its id attribute?
name of the id
Name three different types of values you can use to specify colors in CSS.
color codes, color name, and rgb values.
What CSS properties make up the box model?
height, width, border, margin, and 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 selector that chooses elements that are in a specific state.
What are CSS pseudo-classes useful for?
To make things easier for us when we are coding and want to choose something specific.
Name two types of units that can be used to adjust font-size in CSS.
rem and px
What CSS property controls the font used for the text inside an element?
font-family
What should you use to resize font?
rem not em.
What is the default flex-direction of a flex container?
flex
What is the default flex-wrap of a flex container?
wrap
Why do two div elements “vertically stack” on one another by default?
it’s a block element (block elements can’t be next to each other. inline elements can be together.)
What is the default flex direction of an element with display: flex?
row
What are the three primary components of a page layout? (Which helper classes do you need?)
container, column, and row
What is the minimum number of columns that you should put in a row?
1
What is the purpose of a container?
To group rows and columns easier. (basically an outline.)
What is the purpose of a row class?
they’re vertical chunks of the page. (sectioning off different parts of the container.)
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 has no effect on document flow. you can move it anywhere.
How does setting position: relative on an element affect where it appears on the page?
move relative to where it would normally exist in static form.
How does setting position: absolute on an element affect document flow?
it disappears from the document flow.
How does setting position: absolute on an element affect where it appears on the page?
its boundaries are set by the container it is set in.
How do you constrain an absolutely positioned element to a containing block?
it goes to the first non static ancestor. (AKA position: relative;)
What are the four box offset properties?
top, bottom, left, and right
Give two examples of media features that you can query in an @media rule.
min width and max width.
Which html meta tag is used in mobile-responsive web pages?
What is a breakpoint in responsive Web design?
What is the advantage of using a percentage (e.g. 50%) width instead of a fixed (e.g. px) width for a “column” class in a responsive layout?
