Up to Robert

HTML & CSS style notes


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.

CSS selectors

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; }

Character usage

An em dash is used...

An en dash is used...

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


prime: ′ ″

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


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

grave accent

(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?