HTML and CSS Reference
In-Depth Information
Figure 3.3: Styling an initial “drop cap”
he
before
and
after
pseudo-elements select the points just before and
ater, respectively, the element, allowing the author to insert content at those
points. Here are two examples:
p.joke:after
{ content: url(/icons/smiley.gif); }
a[href]:before
{ content: "[LINK] "; }
he irst CSS statement inserts a smiley-face icon (if the image ile exists at the
URL provided) ater any paragraph that has a
class
attribute with the value
joke
. he second statement inserts the text
[LINK]
before any
anchor
element
that has an href attribute. It should be emphasized that using the
before
and
after
pseudo-elements is not an acceptable means of inserting meaningful
content into a page. he content will not be visible to robots or other user
agents that ignore CSS.
Now that you understand how to select HTML elements in CSS, it is time
to look at the various element properties that can be set in CSS statements.
Typography—the speciication of font families, styles, weight, size, and color—
is the foremost class of these properties.
he font family or typeface sets the document's tone. CSS lets you set both
speciic fonts and generic font families. Although there are now mechanisms
for embedding fonts in a document, by and large, most web pages depend
on the fonts resident in the reader's device used to display the page. he web
author may write a CSS rule calling for a speciic font, such as Copperplate or
Futura, but if the reader does not have those speciic fonts in his device, the
browser substitutes a diferent font.
