Drop-Cap Effect in CSS

Posted on
6,190 Points
1 Endorsement
Last Modified:
Experience Level: Beginner
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS.

Video Steps

1. In CSS, create a new paragraph class by typing "p.fancy"

2. Then, to style only the first letter of the first sentence, include the pseudoselectors ":first-child:first-letter"

3. Style the color of the dropcap using the "color:" property

4. Style the size of the dropcap using the "font-size:" property. A good size is 1em larger than the normal font-size, or 150 to 200% times as large as the normal font-size

5. To ensure the dropcap is in line with the other text, style the line spacing using the "line-height:" property

6. Create space between the dropcap and the rest of the paragraph using the "padding-right:" property

7. Ensure the dropcap is placed to the left of the rest of the paragraph using the "float:" property and defining it as "left"

8. Style the font of the dropcap using the "font-family:" property

9. To use the dropcap, simply type a paragraph in the class using "<p class="fancy">"


Suggested Videos

Title Views Activity
Creating Gradients in CSS 60
Creating Scalable Full-Page Backgrounds in CSS3 144
Creating an Image Sprite 87
Introduction to CSS (Part 1) 80
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Presenting data tables with the ability to interact with the DIVs or cells of information and allowing the first column and the first row to remain in place while scrolling through the data. No HTML tables... just DIVs in columns

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month