CSS Properties and Values Flashcards
Learn common CSS properties and values.
how do we temporarily hide or remove elements using css?
visibility: hidden;
/* to simply not render the element */
display: none;
/* to completely remove the element from flow */
how do we steal colors from websites?
cmd + space “digital color meter”
when can we use align-content?
when we have multiple rows due to flex-wrap being turned on
how we we change order using flexbox?
order: n where n is how many spaces forward (or backwards with -n) we want the element
what does the flex-flow property do?
it combines flex-direction and flex-wrap into one
what basic security measure should we always take with an API key?
don’t embed it directly into code incase you push the repo to others or to public or deploy the site, etc
True/False?
An element can be a member of multiple classes
True
As well as using the inspect tool to see how something looks like on tablet and mobile, what else can we check for in regards to responsiveness?
Change the res to be lower but still landscape ratios, remember not all devices are in as a beautiful high res as this macbook!
Avoid hard coding resolutions too much to avoid this, need more container% and vh/vw dimensions
What are the three ways to define a grids dimensions?
- Ratios
- Decimal (for clarity, but doesn’t work as nice with 1/3s)
- Hard coded dimension, with the remainder cols/rows f’s being a fraction of the remaining space, not total space.
How are the rows and columns of a grid allocated?
/*GRID*/
/*
1 2 3
2 + +
3 + +
4 + +
*/
grid-row: 2 / 3;
grid-column: 1 / 2;
/*the above gives me a block in the second row, first column*/
grid-row: 1 / 3;
grid-column: 2 / 3;
/*the above gives a block covering the first two rows of the second column*/
/*grid-gap gives spaces between grids*/
how do we get “magazine style” wrap arounds of text to fill in space around an element?
float
what is a good best practice in regards to color name variables?
don’t give them an obviously descriptive name. give them a name that has nothing to do with the actual color it represents, this way you can change the value of a color variable and it won’t ever not make sense.
