CSS Flashcards
What are the names of the individual pieces of a CSS rule?
selector, property, value
How are key/value pairs related to CSS?
properties and their values
color: pink
Name three different types of values you can use to specify colors in CSS
RGB, hex, color name
What are three important considerations for choosing fonts?
Readability, theme
Why must you have backup fonts assigned when selecting custom fonts?
in case the user browser does not support that font family
What CSS properties make up the box model?
margin, padding, border
Which CSS property pushes boxes away from each other?
Margin
Which CSS property pushes box content away from its border?
Padding
What purpose does the CSS Cascade serve?
Determine what styling is applied
What is source order?
Last css rule has most precedence
In what situations might you need to apply styling to a single element multiple times in one stylesheet?
mobile responsiveness??
What is the purpose of !important?
Make any property
have extreme precedence.
When is !important a good tool to use?
Almost never. CSS Libraries sometimes call for it.
What is specificity?
How the browser decides what element gets what styling
How is specificity calculated?
0-0-0 column being id-class-element
Why might CSS include this feature?
Makes a check and balance to source order
What is the order of selector strengths for CSS specificity (commonly referred to as the Specificity Hierarchy)?
element-class-id-inline-!important
What is the CSS Cascade?
all factors used by CSS to determine the styling applied (inheritance, specificity, source order)
What are CSS pseudo-classes useful for?
Make dynamic styling
What does the transform property do?
Can dynamically move
What are 3 examples of what can be done with CSS transitions?
Scale an item over time, change the color over time, change styling over time
Why might transitions be a helpful effect for styling?
Easy animation creation
Are all properties able to be transitioned?
NO
What is the initial display property of <div>s?</div>
Block
What is the difference between display: none and visibility: hidden?
display: none the element is completely hidden and the space it takes up is collapsed. visibility:hidden hides the element but it still takes up space
Why are CSS resets helpful for cross browser compatibility?
Makes sure all browsers display your styles the same and properly across different browsers
Why is it important to be mindful of what you reset with your CSS resets?
If you reset a css functionality that you want to use later on , there will be issues
What is an argument against using CSS resets?
It takes a little longer for the browser to load the page.
What is the default value for the position property of HTML elements?
static
How does setting position relative on an element affect document flow and where the element appears on the page?
positions itself relative to where the element would appear in a static docflow
How does setting position absolute on an element affect document flow and where the element appears on the page?
positions against first parent non-static element
removes itself from regular document flow entirely
What are the box offset properties?
top, bottom, left, right
What were floats originally designed for?
Wrapping text around images in articles easily.
What are clears for with floats?
Clears enable elements that follow a float to see the float they are following
What are some of the downsides for using floats in layout design?
Floated elements no longer are part of the document flow
What is the default flex-direction of a flex container?
Row (left-right, top-bottom
What is the default flex-wrap of a flex container?
No wrap
Why should flexbox not be used for building complete web page layouts?
Cannot easily scale it well
What are the three core parts of a grid system?
container, row, column
Why is it a good idea to use percentages for grid column widths?
So different screens display the same
How do you think building this layout would be different without a grid system?
It would be a pain
What is a modal?
Its piece of information we want the user to focus on before interacting with the rest of the page
What are some use cases for modals?
Stop the user from interacting with the entire page until the popup is dealt with
Why does a modal usually need to occupy the entire height and width of the viewport?
Cover over the entire page to block its content until the modal is dealt with
Give two examples of media features that you can query in an @media rule.
min-width, max-width
Which HTML meta tag is used in mobile-responsive web pages?
