Breadcrumbs

Magazine-style CSS Drop Caps

Author
Daniel Malmqvist
Date
Mon 1 Sep 2008 at 18:09

Today I'm going to share a quick technique to spice up your paragraphs. If you have an extreme amount of text on a webpage, you know it can be awfully boring to look at. With some simple CSS you can really spice up your paragraph, from styling the first letter to floating an image within your paragraph. The possibilities are endless. However, today I am going to focus on showing you how to style the first letter of a paragraph, using CSS's :first-letter pseudo-element, to make it drop down, like in a magazine article:

Code: CSS

p {
    font: 11pt/150% Georgia;
}
p:first-letter {
    color: #999;
    font-size: 3.5em;
    float: left;
    line-height: 0.8em;
    margin-right: 10px;
}

Code: XHTML

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras eget sapien. Etiam risus quam, ultricies at, porttitor vel, luctus at, odio. Sed pharetra magna eget ligula. Duis luctus gravida sapien. Curabitur sodales hendrerit felis. Nunc a nibh. Consectetuer adipiscing elit. Cras eget sapien. Etiam risus quam, ultricies at, porttitor vel, luctus at, odio. Sed pharetra magna eget ligula. Duis luctus gravida sapien. Curabitur sodales hendrerit felis. Nunc a nibh.</p>

And the result is:

Drop cap example using CSS

This technique can be used to spice up a paragraph of text and to give it some character. Be experimental and try out other ways to make your paragraphs more stylised.

Tags: