Are you a member? Register or Login

Drop Caps and Paragraph Text Effects Using CSS3

Websites have become a medium of sharing information with the entire world. This has transitioned to include media like photos and videos. But text on a webpage is still the predominant choice for web publishing. This would imply that how you structure paragraphs, sentences, and text on the page can greatly impact if a visitor chooses to stick around and read what you have to say.

In this tutorial I’d like to share a few CSS tips for building creative paragraph or text designs. Legibility and font choices are often directly related to the design itself. But incorporating text effects like drop caps, highlights, and recognizable hyperlinks will distinguish from other content on the page. Take a peek at my live sample demo to see what we’re trying to build.

2 Million+ Digital Assets, With Unlimited Downloads

Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.

Explore Design Resources

Live DemoDownload Source Code

General Page Setup

I’ve created a typical HTML5 doctype along with a fixed center content area. The paragraph styles are meant to appear in conjunction with other page elements, like a notification box or blockquote. You can say a lot in writing without using any secondary headers on the page.

My stylesheet is fairly basic with a number of CSS resets and positioning. Each paragraph element is styled with ems using an extra margin at the bottom. You can also see how I’ve created the h1 tag using horizontal borders positioned evenly in the center.

I’ve chosen to use “Helvetica Neue” as the primary font over the entire page. This is a sans-serif alternative to Helvetica but it shouldn’t limit typography choices for special page items.

Before we jump into the effects it is worth glossing over the HTML. Look at some of the class names and the various elements I’ve used for different purposes within each paragraph.

Paragraph Drop Caps

The first thing you’ll probably notice is the large dropped letter in the first paragraph. This paragraph element is using a class of .first which is directly tied onto the drop cap effect. Writers often include this dropped capital within books and print work – but it’s also great for articles on the web.

You’ll notice there are two selectors applied onto this dropped capital effect. CSS has a pseudo-class named :first-letter which targets the very first letter in any element. Note that this will not work if your paragraph contains another element preceding the text(such as an image thumbnail). If you need an image on the drop cap paragraph use a CSS background instead of the HTML img tag.With this :first-letter selector we can apply the drop cap onto any paragraph using the class .first.

But with another class .dropcap we could apply the effect by specifically wrapping the letter in a span element. This would appear as L in the HTML document. For CMS engines like WordPress it’s easiest to create a theme which supports the .first class appended onto every first paragraph in your posts or pages(or both).

I also designed an alternative drop cap effect which creates a darker background surrounding the letter itself. Notice this alternative drop cap uses the Helvetica Neue family, while the original drop cap changes to Georgia or another serif font. This takes the dialect we often find in printed books and replicates it onto the digital screen.

Now the 2nd paragraph on the page uses a class of .bigger which simply increases the font size and line-height of the entire paragraph. Some websites prefer to make the first paragraph bigger to distinguish from the rest of the page. But you might also try combining drop caps along with bigger text to really catch people’s attention.

Internal Quotes

Articles which have quotes from another person often use blockquotes and other similar elements. Pull quotes are slightly different as they use text directly from the article itself. This is often done to emphasize a point or phrase which is crucial to the overall theme of the content.

My pull quote design is very similar to what you’ll find here on Design Shack. It uses a slightly darker background along with CSS3 box shadows to appear fancier. The internal quote text is also larger to stand apart from the many other paragraphs. It is important to float these pull quotes over to the left or right side of the page so they don’t appear as regular blockquotes.

When using the HTML5 blockquote element we can often include other internal elements. Some blockquotes will incorporate multiple paragraphs and even a citation for the quote. The design style uses plenty of padding and margins to create space between the regular paragraphs. The left border is like a marker to help readers instantly recognize the blockquote is different from the other surrounding paragraphs.

Customizing Symbols

Although this is a tiny special effect, visitors do take notice when reading through pages of content. HTML entities are used to display symbols in your text. These entities could use something like Font Awesome to display customized icons, or you could use them to display typical HTML symbols.

In my example I’ve created the ampersand with a wrapping span element. This will change the font family to Gabriela which uses more of a serif design. A generic span element with the class .fancyamp can apply this font family onto the entity without affecting any other text. I’ve also resized it a bit larger to help stand out from the surrounding letters.

But don’t think this effect can only be used for ampersands. Copyright symbols, fractions, and other HTML entities could all benefit from this stylized design. You might even consider other text effects like bold italics or updating the text color.

Links & Highlighted Tones

In the first few paragraphs you’ll find some highlighted text along with a spiffy anchor link. They both have some extra padding because they both utilize background colors.

For the anchor links I’ve chosen a green color palette, although you can work with any mix of colors that best suits your layout. The added background effect when hovering each link helps visitors to immediately recognize once they’ve hovered onto something. The link text actually darkens so it stands out from the lighter-green background.

Since I’ve included padding onto the left and right sides, the negative margins are used to counteract any weird spaces when hovering on-and-off each link. There’s also padding on the .highlight class but since this doesn’t need a :hover design, the extra space will never actually be noticeable.

If a highlighted text effect isn’t enough you can always create secondary classes for paragraph notifications. My class .notice drastically changes the text color to match up with the lighter shade of yellow in the background. Using the CSS3 text-shadow property helps with legibility. You could also make duplicate classes for notice boxes in other color schemes like green or blue.

Live DemoDownload Source Code


I wouldn’t recommend incorporating all of these effects onto every page of your website. But it is wise to plan out these styles in advance and test everything before adding code to your stylesheet.

Visitors are so accustomed to traditional effects that you can really captivate an audience with these undertones. Feel free to download a copy of my tutorial code and see what other ideas you can add to these paragraph effects.