Drop-Cap Effect in CSS

Posted on
6,188 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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month