11/30/2017 - 3:28 AM

css basics

/*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*/
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
specificity calculator: specificity.keegan.st

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.