1. Class & ID Selectors, Font and List Properties

2. Id Selectors  # followed by Id-name (without space)  Can be used once on a page  Examples: #p1 { color: #000000; } same as p#p1 { color: #000000; }

3. Class Selectors . followed by Class-name (without space)  Can be used multiple times on a page  Examples:.pbold { font-style: bold; } different from p.pbold{ font-style: bold; }

4. Font Properties  font-family  font-size  font-style  font-variant  font-weight

5. Absolute Versus Relative Size  Absolute: predefined meaning or understood real world equivalent xx-small, x-small, small, medium, large, x- large, xx-large cm, in, mm pt (point = 1/72 of an inch) pc (pica = 12 points)

6. Absolute Versus Relative Size  Relative: based on size of something else larger, smaller (relative to parent object) em (appr. width of the letter “M” in a font) ex (appr. height of the letter “x” in the font) px (relative to display resolution) % (relative to parent object)

7. Font Sizes Recommendations  Avoid: pt, pc, mm, cm, in  Avoid pixels if accessibility is important (IE 5/6 have no zoom function)  Use combination of % and em body {font-size: 76%} p {font-size: 1 em;} h1{font-size: 1.5 em;}  Please read: www.thenoodleincident.com/tutorials/box_lesson/font/index.html www.thenoodleincident.com/tutorials/box_lesson/font/index.html

8. Font Properties  font-family  font-size  font-style normal italic (usually separate typeface) oblique (normal font slanted)  font-variant normal small-caps  font-weight  font (shorthand property)

9. Font Weight  normal  bold  bolder  lighter  100, 200, 300, 400 (normal), to 900  Browser support inconsistent, due to lack of available fonts

10. Font Shorthand  selector { font: [ [ || || ]? [ / ]? ] }  If value is not specified  default value  Size and family must be specified  Example: p { font: italic small-caps bold 1.5em/3em sans-serif } h2 { font: 2em fantasy; }

11. List Properties  list-style-type For choosing a marker disc, circle, square, decimal, lower-roman, etc. http://www.w3schools.com/css/css_reference.asp#list  list-style-position Marker inside or outside content area  list-style-image Images can be used as bullets  list-style (shorthand)