CSS Flashcards
What are the names of the individual pieces of a CSS rule?
Selector, declaration block, declaration has property and value, and closing curly brace of the declaration block
In CSS, how do you select elements by their class attribute?
Use a period/dot before the class attribute
In CSS, how do you select elements by their tag name?
Just write the tag name, like body, h1, article
In CSS, how do you select an element by its id attribute?
Use # before the id attribute
Name three different types of values you can use to specify colors in CSS.
RGB values, Hex codes, color names
Ex. rgb(102, 205, 170) hex code (#66cdaa), color name (MediumAquaMarine)
What CSS properties make up the box model?
Content(width & height), 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?
It’s a class that changes the appearance when the user is interacting with it.
Ex. hovering over a button, cursor changing when hovering, or active (actively clicking and holding down mouse), focus (when browser knows you are ready to interact with the element like when cursor is in a form input ready to accept typing), visited, link, disabled
What are CSS pseudo-classes useful for?
It helps distinguish the actions a user can interact with or has already interacted with.
Ex. the link can change colors depending on if it was already visited or if it’s about to be clicked aka hovering.
Name two types of units that can be used to adjust font-size in CSS.
Px, rem(can use quarter sizes, 1.25, 1.5 etc), ems, %
What CSS property controls the font used for the text inside an element?
Font-size, font-family, font-weight, font-style, text-transform, text-decoration
What is the default flex-direction of a flex container?
Row/horizontal
What is the default flex-wrap of a flex container?
no-wrap.
tries to fit everything into 1 line, which may cause container to overflow.
Why do two div elements “vertically stack” on one another by default?
Because they are default block element
What is the default flex-direction of an element with display: flex?
Row left to right
What is the default value for the position property of HTML elements?
static
How does setting position: relative on an element affect document flow?
The element moves in relation to where it would have been in normal/static flow, but doesn’t affect document flow since it acts like it takes up the same space.
How does setting position: relative on an element affect where it appears on the page?
The element retains its size but it can be moved left or right or top or bottom
How does setting position: absolute on an element affect document flow?
The element acts like they don’t exist and removing it from document flow
How does setting position: absolute on an element affect where it appears on the page?
The properties (left, right, top, bottom) specify where the element should appear in relation to its containing element(edge).
How do you constrain an absolutely positioned element to a containing block?
Absolute positioned elements position themselves within the first non-static ancestor they have, so you would have to make the containing block position: relative.
What are the four box offset properties?
Top, bottom, left, right
What are the four components of “the Cascade”.
Source order, inheritance, specificity, important
