max-width: Text with about 30–60 characters per line is easiest to read. (About 15–30 em?)
line-height: (a.k.a. leading) Default tends to be about 1.2 (i.e. 120%). For on-screen 1.4–1.6 might be better.
| universal | * { color: blue; } |
| multiple selectors | h1, h2 { color: blue; } |
| tag | span { color: blue; } |
| class | .class { color: blue; } |
| id | #id { color: blue; } |
| descendant | div span { color: blue; } |
| (direct) child | div > span { color: blue } |
| adjacent sibling | h1 + p { color: blue } |
| attribute present | img[title] { border: 1px solid black } |
| attribute value | img[title="blah"] { border: 1px solid black } |
| other attribute selectors | img[alt-="small"] img[title|="small"] |
| pseudo-classes | :first-child :focus :lang(n) a:link a:visited a:hover a:active |
| pseudo-elements | :first-line :first-letter :before :after |
(Copy over stuff about dashes, &c.)
The web & HTML are great because they allow the user to customize the fonts, font sizes, colors, window size, &c. to whatever works best for the user & their computer (or other device) while still providing a fairly rich formatting. Unfortunately nearly all user agents (technical jargon for browser) neither provide decent defaults nor make it easy for or encourage the user to customize those settings.
So, do we leave these things (font, font size, colors, &c.) unspecified so that the people who have configured such things optimally for themselves & their device? Or do we specify them so that the vast majority who haven’t configured these things don’t get the lousy defaults provided by their browser?