3:25
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">"
0 Comments
Suggested Videos
| Title | Views | Activity |
|---|---|---|
| Creating Gradients in CSS | 60 | |
| CSS Positioning - Relative vs Absolute vs Fixed | 316 | |
| Navigation Hover Effects with CSS Sprites | 315 | |
| Lists and Links | 106 |
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
Suggested Courses
Next Video:Creating Scalable Full-Width Header in CSS3