Web Design

Blog

Sailboat race in Bellingham Bay

How to Create a Drop Cap with CSS

This post teaches web developers how to create a drop cap element. When I told a developer buddy about the following method, he said, "Why not just place the first letter in a span in your markup?" You could. But then you'd have to do it every time, and if you are creating a design / template where the content author / end user is using a CMS and not coding, a span won't fly. You want your drop cap to work without having to structure your HTML around it. Read on to learn a quick way to drop that drop cap into your next web design.

See the Pen Drop Cap Fun by Mac Bubb (@macbubb) on CodePen.

How to Select the First Character

The key to a drop cap is using a selector that grabs the first letter of a paragraph (or other tag) so it can be styled separately. The CSS pseudo-element ::first-letter is our solution. The syntax for pseudo-elements is selector::pseudo-element { property: value; }. So to select the first letter of a paragraph, use p::first-letter. That will select the first letter of every paragraph.

So, if you have more than one paragraph in your markup, using just the ::first-letter pseudo-element will make every paragraph have the drop cap, not just the first one. To fix this, and only create a drop cap in the first paragraph, use the pseudo-selector :first-of-type to specify just the first letter of the first paragraph. as follows, p:first-of-type::first-letter.

How to Style the Drop Cap

Float It and Bloat It

Start by applying the style float:left to get your drop cap to take up all the space necessary with the paragraph, and not just the first line. If you don't float the letter, it will just be stuck on the first line and the other lines won't wrap around it. Set the size of your drop cap next using the font-size property, of course. You may encounter some funny behavior with the line height of the first line being larger than the others, if this happens, apply the style line-height: 0rem to the drop cap.

Style It

Now you can apply whatever styles you want to decorate your drop cap. It's CSS, so there are many options to choose from. In my codepen, I have one example with a double underline, another one with the drop cap is inset in a circle, and another drop cap is oversized and layered behind the rest of the text.

Adjust Layout

Once you have the styles and sizes selected, you only need to adjust the padding and margins of the drop cap. Which sides you need to adjust and how much depends on how you've styled your drop cap. Check out the three example designs from the codepen if you want to see what I did.

Mic Drop

Time to drop the mic on our drop cap tutorial. That is the end. Hope you find success with it in your next web design!