/*A SPACE = a descendent*/
p a {
/*will only affect links inside of a paragraph*/
}
/*A COMMA just groups the selectors*/
h1, h2, h3 {
color: red; /*all 3 are now red*/
}
/*A PSEUDO selector uses a : to select a STATE*/
a:hover {}
a:focus {
outline: 1px solid black;
}
/*this can be used to highlight form fields when tabbing thru*/
/*INHERITANCE
Some elements will not inherit, such as links, because they have a default style already applied. You would need to specifically target the links.
W3C has a full list: www.w3c.org/TR/CSS21/propidx.html (look for the 'iherited' column)
SPECIFICITY Ranking: determines which CSS rule is applied by the browsers.
1. Every selector has a ranking
2. The higher rank (or highest specificity) will be applied
• Type selectors have the lowest: h1, h2...
• Class selectors: .example
• ID selectores have the highest: #example
http://cssspecificty.com
specificity calculator: specificity.keegan.st
TYPOGRAPHY
type-face: is the set of fonts that make up a family
font: is a particulat weight or style in that type-face
Font Size:
Relative font sizes are based on nearest ancestor element (rem, em, %.
Absolute values are not (px.
px: absolute value, browser default: 16px
em: relative value, named after letter 'm' and historically measured width but now refers to the height of the font.
1em = 1 inherited font-size, if no font-size is declared then 1em = default = 16px
rem: like em but relative ONLY to the root element (don't need to worry about nearest ancestor)
If no font-size declared, then 1rem = default = 16px. 1rem will always be 16px thruout site.
If root (set in html or body tag) font-size = 14px, then 1rem = 14px, 1.5rem = 21px, .5rem = 7px....etc.