Lowter

Magazine-style CSS Drop Caps

Published on the 1st of September 2008

By Daniel Malmqvist

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:

CSS

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

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:

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.

Opera 9. Innovation delivered. Download Now (external link)