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
Selected Reading
Which element is used to add special style to the first letter of the text in a selector with CSS
The CSS :first-letter pseudo-element is used to apply special styling to the first letter of the first line in a block-level element. This is commonly used to create drop caps or emphasize the beginning of paragraphs.
Syntax
selector:first-letter {
property: value;
}
Example
The following example demonstrates how to style the first letter of paragraphs with different effects −
<!DOCTYPE html>
<html>
<head>
<style>
p:first-letter {
font-size: 3em;
color: #e74c3c;
font-weight: bold;
float: left;
margin-right: 5px;
line-height: 1;
}
p.normal:first-letter {
font-size: 18px;
color: #3498db;
font-weight: normal;
float: none;
margin-right: 0;
}
</style>
</head>
<body>
<p class="normal">First character of this paragraph will be styled with blue color and 18px font size.</p>
<p>The first character of this paragraph creates a drop cap effect with large size, red color, and bold weight. This demonstrates the power of the :first-letter pseudo-element for creating elegant typographic effects.</p>
</body>
</html>
The first paragraph shows a blue "F" that is slightly larger than normal text. The second paragraph displays a large red "T" that acts as a drop cap, floating to the left with the text wrapping around it.
Conclusion
The :first-letter pseudo-element is perfect for creating drop caps and other decorative first-letter effects. It only applies to block-level elements and can be combined with various CSS properties for creative typography.
Updated on: 2026-03-15T11:28:17+05:30
170 Views
Advertisements