Creating Drop Caps in CSS
Drop caps are a very useful technique for making your paragraphs stand out a bit. Today, we’ll have a look at how to implement drop caps with care, and some of the pitfalls surrounding their use.
Server Intellect assists companies of all sizes with their hosting needs by offering fully configured server solutions coupled with proactive server management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.
STEP ONE:
The HTML
Now, we’ll need to target the first letter of our paragraph. To do this, we’ll wrap the first letter in a span tag, and give it a unique class name. Here’s what the HTML will look like:
Great, now we can start styling the first letter to create our drop caps effect.
STEP TWO:
The CSS
We'll need to shrink our paragraph a little bit, since right now it just runs completely across the screen. Let's give it a height and width definition to bring it down to size:
Wonderful, now our paragraph is smaller and more manageable. Next, we'll go ahead and start styling the first letter. Let's make it 4 times bigger than the other text and a bit bolder as well:
Now, when you view the page in a browser, you'll see that our drop caps implementation is already beginning to take shape. However, notice that the text after the first letter runs along the bottom of the drop caps and normally should run somewhere nears the top.
If we float the first letter to the left, we almost get the desired effect. Here's how to float the first letter:
You'll notice that the letters following the drop caps are still a bit higher than the drop caps itself.
The last step will be to add a slightly negative top margin to pull our drop caps up a notch. Here's what the finished CSS looks like:
Preview:
CSS drop caps are all the rage, and as you can see, aren't very hard to implement at all. You could also give the first letter a more elegant style font to make it really stand out from the rest of the text. Experiment with different styles to find a drop caps that suits your site. Join us next time when we discuss the line-height property and what it does. See you then!
We moved our web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.
Download Drop Caps Source Files
Code Block
index.html
A basic HTML page with a paragraph:
<p> Aenean habitasse dignissim, ultricies diam montes risus urna tortor enim augue porttitor ut elit dignissim in elit lundium lacus elit dapibus! Phasellus? Magna dignissim placerat scelerisque vel, cum nisi non! Tortor, risus habitasse proin integer lacus sagittis porttitor scelerisque, mus, tempor non augue. Urna in lundium dapibus enim adipiscing? Pulvinar sit. Vel turpis! Mid porttitor integer, massa rhoncus sit, scelerisque! Penatibus facilisis aliquam! Cum, urna cras lacus nunc turpis non. Lacus! Duis ac. Rhoncus urna scelerisque cursus, lacus velit, nisi cras. Elementum urna magna ultrices egestas augue nisi purus, purus porta, lectus, platea turpis pid amet scelerisque nascetur montes rhoncus nascetur, magna, cursus integer porttitor diam adipiscing! Mid tempor sociis dolor? Etiam augue sit rhoncus etiam lundium integer augue facilisis vut nec! Lectus montes et tincidunt ut et pulvinar urna dictumst montes, augue, augue egestas pid augue ut mid cum! Lorem urna, dignissim sit proin enim. Nisi dolor urna? Odio, enim ut proin auctor vel eros dictumst, scelerisque, dipiscing massa cras non ac adipiscing integer tristique, aliquet amet! </p>
Code Block
index.html
Targeting the first letter:
<p> <span class="firstLetter">A</span>enean habitasse dignissim, ultricies diam
montes risus urna tortor enim augue porttitor ut elit dignissim
in elit lundium lacus elit dapibus! Phasellus? Magna dignissim
placerat scelerisque vel … </p>
Code Block
style.css
Adding height and width to the paragraph:
p { height: 400px; width: 400px; }
Code Block
style.css
Beginning to style the first letter:
p { height: 400px; width: 400px; } .firstLetter { font-size: 400%; font-weight: bolder; }
If we float the first letter to the left, we almost get the desired effect. Here's how to float the first letter:
Code Block
style.css
Floating the first letter:
p { height: 400px; width: 400px; } .firstLetter { font-size: 400%; font-weight: bolder; float: left; }
The last step will be to add a slightly negative top margin to pull our drop caps up a notch. Here's what the finished CSS looks like:
Code Block
style.css
Pulling up our Drop Cap:
p { height: 400px; width: 400px; } .firstLetter { font-size: 400%; font-weight: bolder; float: left; margin-top: -10px; }
CSS drop caps are all the rage, and as you can see, aren't very hard to implement at all. You could also give the first letter a more elegant style font to make it really stand out from the rest of the text. Experiment with different styles to find a drop caps that suits your site. Join us next time when we discuss the line-height property and what it does. See you then!
We moved our web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.
Download Drop Caps Source Files
