<

[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x

Drop-Cap Effect in CSS

Posted on
6,159 Points
59 Views
1 Endorsement
Last Modified:
Experience Level: Beginner
3:27
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">"

1
Comment
0 Comments

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

Join & Write a Comment

Suggested Videos

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Suggested Courses
Course of the Month18 days, 18 hours left to enroll

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month