need to know the distinction at all, if in fact there is one? Nope. Just know
that these various pseudo-whatevers exist in case you ever want to use one of
them. It’s sort of like a car: You can drive just fine without knowing the genus
of all the bugs hitting your window.
Pseudo-elements are used exactly the same way that you use pseudo-styles,
with one exception. You can put a pseudo-class name anywhere you want in a
selector, but a pseudo-element’s name must be listed after the subject of the
selector. (Subjecthere means whatever elements in the document that match
the selector.) Don’t bother with this ultimately pointless distinction either.
Who !@#)!! cares? Just follow the syntax in the sample code in the next section
and you’ll be fine.
Creating quick drop caps with first-letter ......................................
A quick way to add some elegance to your text is with drop caps: large
characters at the beginning of your paragraphs. Sometimes the letter is a
different color than the surrounding text as well. Here’s a style using the
pseudo-element first-letter:
<html>
<head>
<style>
p:first-letter
{color: steelblue;
font-size:44px;}
</style>
</head>
<body style=”font-size=x-large”>
<p>
This first paragraph has a nice drop cap effect that you can
see in steel blue.
</p>
<p>
And this second paragraph has a drop cap too.
</p>
</body>
</html>
274 Part IV: Advanced CSS Techniques
