LabEx
Log InJoin Free

Stylish Drop Cap Technique

Beginner

This tutorial is from open-source community. Access the source code

Introduction

In this lab, we will learn about the Drop Cap technique in CSS. Drop Cap is a typographic technique used to add visual appeal to the first letter of the first paragraph. Through this lab, you will understand how to use the :first-child selector and the ::first-letter pseudo-element to style the first letter of a paragraph in a unique and eye-catching way.

This is a Guided Lab, which provides step-by-step instructions to help you learn and practice. Follow the instructions carefully to complete each step and gain hands-on experience. Historical data shows that this is a beginner level lab with a 100% completion rate. It has received a 92% positive review rate from learners.

Drop Cap

You can write the code in index.html and style.css.

Makes the first letter of the first paragraph bigger than the rest of the text.

  • Use the :first-child selector to select only the first paragraph.
  • Use the ::first-letter pseudo-element to style the first element of the paragraph.
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo
  ligula quis tincidunt cursus. Integer consectetur tempor ex eget hendrerit.
  Cras facilisis sodales odio nec maximus. Pellentesque lacinia convallis
  libero, rhoncus tincidunt ante dictum at. Nullam facilisis lectus tellus, sit
  amet congue erat sodales commodo.
</p>
<p>
  Donec magna erat, imperdiet non odio sed, sodales tempus magna. Integer vitae
  orci lectus. Nullam consectetur orci at pellentesque efficitur.
</p>
p:first-child::first-letter {
  color: #5f79ff;
  float: left;
  margin: 0 8px 0 4px;
  font-size: 3rem;
  font-weight: bold;
  line-height: 1;
}

Summary

Congratulations! You have completed the Drop Cap lab. You can practice more labs in LabEx to improve your skills.