Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to design initial letter of text paragraph using CSS?
The CSS ::first-letter pseudo-element is used to style the first letter of a text paragraph. This allows you to apply specific styles to the initial letter of the first line of a block-level element, making it stand out with different font size, color, or style.
Syntax
selector::first-letter {
property: value;
}
Common Properties
The following properties are commonly used with ::first-letter
| Property | Description |
|---|---|
font-size |
Sets the size of the first letter |
color |
Changes the color of the first letter |
float |
Creates drop cap effect |
line-height |
Controls vertical spacing |
margin |
Adds space around the letter |
Example 1: Basic First Letter Styling
This example demonstrates how to style the first letter with larger font size and different color
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
font-size: 3em;
color: #FF0000;
font-weight: bold;
}
p {
font-size: 16px;
line-height: 1.6;
text-align: justify;
}
</style>
</head>
<body>
<p>Anne Frank was born on June 12, 1929, in Frankfurt am Main, Germany. She was a Jewish girl who became famous for her diary written during World War II.</p>
</body>
</html>
A paragraph appears with the first letter "A" displayed in large red text (3 times the normal size) and bold weight, while the rest of the text appears in normal black formatting.
Example 2: Drop Cap Effect
This example creates a traditional drop cap effect where the first letter is floated and spans multiple lines
<!DOCTYPE html>
<html>
<head>
<style>
.drop-cap::first-letter {
font-size: 4em;
float: left;
line-height: 0.8;
margin: 8px 8px 0 0;
color: #2E86AB;
font-weight: bold;
}
.drop-cap {
font-size: 18px;
line-height: 1.5;
text-align: justify;
}
</style>
</head>
<body>
<p class="drop-cap">Once upon a time in a far away kingdom, there lived a brave princess who embarked on an extraordinary adventure. Her journey would take her through enchanted forests, across mystical rivers, and over towering mountains.</p>
</body>
</html>
A paragraph with a blue drop cap "O" that is much larger than the rest of the text. The first letter floats to the left and spans approximately three lines of text, creating a classic drop cap newspaper effect.
Conclusion
The ::first-letter pseudo-element provides an elegant way to enhance paragraph typography. Whether creating simple enlarged letters or sophisticated drop cap effects, this CSS feature helps make text more visually appealing and professional.
3K+ Views
