HTML and CSS Reference
In-Depth Information
•
margin properties
•
padding properties
•
border properties
•
color
•
background properties
Let's say we want to create a two-line
drop cap
for the following paragraph:
<p>Gorillas don't always eat bananas, all cows eat grass, good boys do fine
➥
always, and fat cops get donuts after every bust.</p>
To style the paragraph and the G accordingly, all we need is this:
p {
font-size:100%;
}
p:first-letter {
font-size:300%;
font-weight:bold;
float:left;
}
This gives us the result shown in Figure 3-1.
Figure 3-1.
Our drop cap, as rendered by Firefox
If we decide we'd rather style the G as a larger
initial cap
, we only have to adjust the
p:first-letter
rule by removing the
float
declaration and increasing the
font-size
(as seen
in Figure 3-2):
p:first-letter {
font-size:400%;
font-weight:bold;
}
