Another typographic convention is to emphasize the first line or first few words of an opening paragraph, known as a run-in; typically the words are transformed into small-caps with CSS. Returning to the scenario used in the earlier drop-cap example, the CSS would be:

p:first-of-type:first-line {
	font-variant: small-caps;
}

Not every typeface has a true small-caps variant; in that case, the browser will fake the equivalent. Other typefaces are nothing but small caps: Trajan Pro, for example. Alternatively, if you were using an OpenType font, you could employ true small caps.

Note that the effect of :first-line is dynamic: as the number of words changes (due to rescaling content or altering the browser window size), only the text that remains in the paragraph's first line is affected by this rule.

Affecting just the first few words is somewhat more complicated. There is, as of this writing, no pseudo-selector for :first-word, :second-word or :nth-word. The only solution for the time being would be to wrap a <span> tag around the words you wish to affect, and write a CSS rule for the span in context. Our HTML code would be:

<p>P<span>hilip, after the defeat</span> of Onomarchus, had marched toward the pass of Thermopylae, which, however, he found occupied by the Athenians, who had sent a force for the purpose of preventing his advance. Being baffled there,he directed his march into Thrace, and alarmed the Athenians for the safety of their dominions in the Chersonese.

And the added CSS:

p:first-of-type span {
	font-variant: small-caps;
}

<span> is a tag that is used when there are absolutely no other alternatives for markup. <span> is an inline tag that is non-semantic: it provides no more information than "here is a set of content". For that reason, you should wrack your brain for any alternative elements to <span> before using it.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.