Hey y’all. In this micro-tutorial we’re going to look at a simple method for creating a drop cap effect in CSS. You’ve seen this kind of thing before: the first letter at the start of a chapter or post is enlarged / styled in some distinctive way.

Well turns out there’s a really easy way to do this in CSS, so let’s dive in.

First up, we’ll need an <article> containing a couple of <p> tags.

<article>
  <p>Welcome to my wonderful blog post.</p>
  <p>Today we're going to talk about something cool...</p>
  <p>Really cool. Promise.</p>
</article>

Then the we use a special selector to select the first letter and style it differently from the other letters:

article p {
  font-size: 18px;
  font-weight: 400;
}

article p:first-of-type::first-letter {
  font-size: 26px;
  font-weight: 600;
}

And voilà! Just like that the first letter of your post is enlarged and bold, while the rest of the text remains normal. Pretty slick hey?

This is a good oppurtunity to experiment and create a unique style that makes your project really pop!

As always, happy hacking!

Love Kirk M. (@saricden)

Header Image courtesy of Paolo Chiabrando via Unsplash