Another typographic convention is to emphasize the first line or first few words of an opening paragraph, known as a run-in. Typically these words are transformed into small-caps. CSS makes this easy. Returning to the scenario used in the earlier drop-cap exercise, in which the paragraph has an id, the associated CSS for this effect would be:

1. p#firstpara::first-line { font-variant: small-caps; }

Not every font face has a true small-caps variant; in that case, the browser will fake the equivalent. Other fonts are nothing but small caps: Trajan Pro, for example. Alternatively, if you were using an OpenType font, you could emply 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 first line of the id firstpara paragraph are 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:

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

And the added CSS:

1. p#firstpara 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.