CSS Flashcards
What are the names of the individual pieces of a CSS rule?
css-syntax
Selector and Declaration block (which contains a property and value).
In CSS, how do you select an element by its id attribute? (css-syntax)
You use a “#” (octothorp) before the id name
What are 3 examples of shorthand properties? (css-syntax)
Padding, Margin, Border.
Name three different types of values you can use to specify colors in CSS. (css-colors)
Name, #code, RGB, HSL
Which CSS property adds space between a box’s content and its border? (css-box-model)
Padding
What CSS properties make up the box model? (css-box-model)
Padding, Margin, Border, and Content
Which CSS property pushes boxes away from each other? (css-box-model)
Margin
Which CSS property adds space between a box’s content and its border? (css-box-model)
Padding
What is a pseudo-class?
css-pseudo-classes
A keyword added to a CSS selector that specifies a special state of the selected element(s) and adds functionality to it.
What are CSS pseudo-classes useful for? (css-pseudo-classes)
They allow you to change the appearance of elements when users interact with them.
Name at least two units of type size in CSS.
css-fonts
Px, rem, %, em
What CSS property controls the font size used for the text inside an element? (css-fonts)
font-size
What is the default flex-direction of a flex container? (css-flexbox)
Row
What is the default flex-wrap of a flex container? (css-flexbox)
No wrap
What does Align content do? (css-flexbox)
Aligns all the content within flexbox elements on the cross-axis.
What does Align-items do (css-flexbox)
Adjusts the rows themselves on the cross -axis
Why do two div elements “vertically stack” on one another by default? (css-layout-classes)
Because they are block elements.
What is the default flex-direction of an element with display: flex? (css-layout-classes)
Row. (To the right).
How do write random text-content? (css-layout-classes)
lorem(?).
What are utility classes? (css-layout-classes)
Classes that tell you what they do in the name (ex) .column-third.
What are semantic classes? (css-layout-classes)
classes that don’t tell you what they do in the name. (Ex .character)
How does setting position: absolute on an element affect where it appears on the page? (css-positioning)
It is positioned to the top-left of it’s closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block.
What is the default value for the position property of HTML elements? (css-positioning)
static
What are the four box offset properties? (css-positioning)
top, bottom, left, right
