Make a drop-cap effect using CSS

Learn: How to make drop-case effect using CSS? This article contains detailed tutorial to make drop-case effect using CSS.
Submitted by Abhishek Pathak, on July 17, 2017

While reading books you must have noticed the first letter is different from other paragraph in terms of size or design. This is a tradition that is being followed over the years. It makes the text look pretty and gives it a bold start.

Here's an example of Drop-Cap effect:

Program:

Well, this form of styling is much easier than you might think. We will use CSS pseudo selectors namely :first-of-type and :first-letter.

We will target the paragraph, since they represent the text of an article or book.

p:first-of-type:first-letter {
  font-size: 32px;
  font-weight: 700;
}

The p is the paragraph element selector and we will apply the pseudo selectors to it. Now, if we apply only :first-letter to it, all the paragraphs would have their beginning first letter styled as drop-cap effect.

To avoid this, we will use :first-of-type which will select only the first of its type. Then we give it properties that make it larger and bolder than rest of the text.

DEMO

HTML code with CSS:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Drop-cap Effect</title>
  <style>
    p:first-of-type:first-letter {
      font-size: 32px;
      font-weight: 700;
    }
  </style>
</head>
<body>
  <p>This is a simple paragraph Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus ullam fugiat accusamus tempore sapiente voluptate, asperiores tenetur ea odio architecto!</p>
  <p>What's up Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, enim?</p>
</body>
</html>

There you go! Nice and Easy!

CSS Tutorial & Examples »

Styling input placeholder with CSS

Creating a loading animation with CSS

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples