CSS Flashcards
What are the names of the individual pieces of a CSS rule?
selector,
declaration,
BLOCK
property,
value
universal
css rule set
css selector
curly braze
In CSS, how do you select elements by their class attribute?
.class p class=””
In CSS, how do you select elements by their tag name?
p
In CSS, how do you select an element by its id attribute?
apple, div id=””
Name three different types of values you can use to specify colors in CSS.
HEX codes
RGB
Color Names
What CSS properties make up the box model?
margin, padding border, content area
Which CSS property pushes boxes away from each other?
Margin
Which CSS property add space between a box’s content and its border?
padding
box sizing border box
without border box, when you add padding etc to something, it may change the size of something
otherwise it gives you a tiny bit of padding within the content
What is a Pseudo Class?
A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s)
-phantom class in a specific state they are rather than regular style selectors
What are CSS pseudo-classes useful for?
1 they help the navigator or show things that are being changed on the page
direct child selector
table > tr this means all table rows
What is the default flex-direction of a flex container?
row
What is the default flex-wrap of a flex container?
no-wrap
flex only controls the direct children, so you have to always add display flex
Why do two div elements “vertically stack” on one another by default?
What is the default flex-direction of an element with display: flex?
Why do two div elements “vertically stack” on one another by default?
Because DIVs are technically block elements
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?
sticky
How does setting position: relative on an element affect document flow? effect elements around it?
you can shift TRBL and it does not affect document flow
does not have any direct affect on document flow
there is no change on document flow - only moves something visually not laterally
How does setting position: relative to an element affect where it appears on the page?
CHanges its appearance but now the order of document flow
doesn’t affect inherently where it appears on the page
How does setting position: absolute on an element affect document flow?
It is taken out of normal flow, and does not disrupt other elements as they ignore it
How does setting position: absolute on an element affect where it appears on the page?
It is not in normal flow, everything else is, sits on top, goes to wherever nearest relative is,
How do you constrain an absolutely positioned element to a containing block?
by setting its containing element to position relative
What are the four box offset properties?
top, right bottom left
what css rule set properties shorthand is transition
/
transition-property , transition-duration , transition-timing-function , and transition-delay .
If you introduce CSS rules for a smaller min-width after the styles for a larger min-width in your style sheet, the CSS rules for the smaller min-width will “win”. Why is that?
Min width and max
Source order is given to the lower css rule set inheritance
