Style stuff

Character usage

An em dash is used...

For a sudden break in thought: So, then I—what did you say?
For a parenthetical statement
Instead of a colon or semicolon to link clauses
To indicate an open range: Robert Fisher (1969—)
A stand-in for the last two digits of a four digit year: 20—
Before author citations
As a bullet in lists

An en dash is used...

For ranges: Bake for 8–10 minutes. (Although the word to is probably a better choice.)
For connection: The Mason–Dixon line
In place of a hypen in compounds in which one part is already hyphenated
In place of a hypen in compounds in which one part is two words: pre–World War II
Sports scores or Supreme Court votes: 100–99; 5–4 (At least according to this CMS Q&A. Rationalized because we often use the word to when reading them.)

A minus is used... (I still tend to use a hyphen for these)

For negative numbers: It got down to −10° F today.
For subtraction: 10−7=3

hyphen:

To separate parts of a compound word: well-known
To indicate prefixes & suffixes: pre-, post-, -s, -es
To indicate that a word should be spoken letter-by-letter: k-n-o-w
When a prefix ending in a vowel is added to a word beginning with a vowel: co-operate, pre-eminent (see also diaeresis below)

prime: ′ ″

Feet & inches: He stood 5′11¾″.

swung dash: In Unicode 4. Most fonts don't have it. Used for brevity in dictionaries when repeating the head word. A tilde (~) can serve as a substitute.

long dash

2-em dash: missing letters is a word: Mr. F—— wishes to remain anonymous.
3-em dash: missing word or phrase: What the ———?

diaeresis

To indicate that a vowel should not be considered to form a dipthong with the previous vowel
- daïs
- deëmphasize
- coöperate
- coördinate
- naïve
- noël
- preëminent
- preëmpt
- reënlist
- microörganism
To indicate that a trailing E is not silent: Brotë

Sometimes an acute accent is used: Nestlé, Pokémon, saké, molé

grave accent

To indicate in verse that -ed should be syllabic where it would regularly not be: blessèd

(I thought it was an acute accent, but I may be wrong.)

One space, two space

When using a proportial font, there is no need to use two spaces after a period. But you shouldn’t need to know that. Your software should be smart enough to ignore extraneous space characters. Indeed, this paragraph has two spaces after each period, but your web browser likely displays it the same as if there were only one.

The paradox of web style

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?

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
sibling	A ~ B
negation	*:not(p) { color: green; }
nth child	table:nth-child(3n+2) { background-color: silver; }

HTML & CSS style notes

Spacing

CSS selectors

Character usage

One space, two space

The paradox of web style