<

Drop-Cap Effect in CSS

Posted on
6,165 Points
65 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

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Join & Write a Comment

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
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!

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month