CSS Flashcards
What are the names of the individual pieces of a CSS rule?
Selector and Declaration. Then the declaration is made up of a property and value.
How arekey/valuepairs related to CSS?
Declarations are made up of a similar pairing called property:value
Name three different types of values you can use to specify colors in CSS.
Hexidecimal values, rgba values, hue/saturation/lightness HSLA.
What are three important considerations for choosing fonts?
Line-height, line-spacing, fallback fonts, typeface readability, typeface support and linking fonts. Type of font-size measurements (ems vs px vs percent)
Why must you have backup fonts assigned when selecting custom fonts?
Older browsers may not support your selected font and may need a font stack to make sure your page doesn’t look wack.
What CSS properties make up the box model?
Content, padding, border, margin.
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?
To have a type of reliable ruleset and order in terms of when selectors target the same property. Ex: you can make mass changes to a governing container if you know children in the container will want to share the same rule, however there may be a few children where you do not want this styling to happen.
Cody: it determines which styling is ultimately applied.
What is source order?
Order in which rules are written in the stylesheet
In what situations might you need to apply styling to a single element multiple times in one stylesheet?
Font-family. Setting a font-family for an entire page, then setting them individually for other elements. Also responsive design. Diff sets of styling for different media queries.
What is inheritance?
When elements take on the same styling as a parent element (like font-family).
Why might CSS include the feature of inheritance?
Quality of life. Not having to make the same rule for other elements that need the same styling.
Is inheritance a good tool to use for styling? If so, on what occasions?
Yes, when elements will have the same properties, like fonts, padding, etc.
What is the purpose of!important?
To supersede any css rule that conflicts with the property that is marked with !important.
When is!importanta good tool to use?
Almost never. Utility classes. When a higher specificity affects an entire element type like , which there are lots of on the page. You can give an exemption to a whole class of buttons so they don’t get their styling overwritten. Overwritting styling I dont have control of like a wordpress template or writing libraries for css.
What is specificity?
The way the browser decides how relevant a css property is to an element. Different html elements hold different specificity weight. If something weighs more, it will win over weaker elements if they have conflicting CSS properties, regardless of source order.
How is specificity calculated?
There is a scoring style of 0-0-0-0. Far right column is element type. If you select all div elements, it has a score of 0-0-0-1 because you are only selecting one element type. Li > ul has a score of 0-0-0-2. A class has a score of 0-0-1-0. 1 class will beat 10000 elements.
Why might CSS include this feature (specificity)?
So you can make precise selections on html elements. Quality of life. It lets you make mass changes to elements then make changes to other child elements. We don’t have to worry about source order as much.