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
CSS :first-letter pseudo-element
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. It's commonly used to create elegant drop caps and eye-catching text effects that draw attention to the beginning of a paragraph or section.
Syntax
::first-letter {
property: value;
}
Properties That Can Be Applied
The ::first-letter pseudo-element supports the following CSS properties −
| Property Type | Properties |
|---|---|
| Font Properties | font-family, font-size, font-style, font-weight |
| Color & Background | color, background-color, background-image |
| Border & Margin | border, margin, padding, float |
| Text Decoration | text-decoration, vertical-align, line-height |
Example: Basic Drop Cap Effect
The following example creates a simple drop cap by enlarging and coloring the first letter −
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
font-size: 40px;
color: #DE3163;
font-weight: bold;
}
body {
font-family: verdana;
background-color: #D5F5E3;
padding: 20px;
}
</style>
</head>
<body>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</body>
</html>
A paragraph appears with the first letter "T" displayed in large pink text (40px) while the rest of the text remains in normal size black text on a light green background.
Example: First Letter with Punctuation
When text starts with punctuation, ::first-letter includes the punctuation mark along with the first letter −
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
font-size: 40px;
color: #145A32;
font-weight: bold;
}
body {
font-family: verdana;
background-color: #D6EAF8;
color: #333;
padding: 20px;
}
</style>
</head>
<body>
<p>"The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository."</p>
</body>
</html>
The paragraph displays with both the opening quotation mark and the letter "T" styled together in large green text, while the rest of the text appears in normal formatting.
Example: Advanced Drop Cap with Float
This example creates a true drop cap effect by floating the first letter and adjusting margins −
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
font-size: 60px;
color: #8B0000;
float: left;
line-height: 50px;
padding-right: 8px;
margin-top: 2px;
font-family: serif;
}
p {
font-family: Arial, sans-serif;
line-height: 1.6;
text-align: justify;
margin: 20px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</body>
</html>
A paragraph with a large decorative "L" that floats to the left and spans multiple lines, creating a traditional drop cap effect where the text wraps around the enlarged first letter.
Conclusion
The ::first-letter pseudo-element is an excellent tool for creating elegant drop caps and drawing attention to paragraph openings. It works with most font and color properties, and when combined with float, creates professional-looking typography effects.
296 Views
