Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
CSS :first-letter pseudo-element
For many years, drop caps have been utilized in print media to elegantly introduce the first letter of the opening paragraph in a section or chapter. Because they are applied to just one letter, these drop caps serve to attract the reader's attention.
This is also a wonderful opportunity to utilize a highly styled font without detracting from the readability of the text. By using the::first-letter pseudo element and the new initial-letter property in CSS, it is possible to achieve the same drop cap effect.
CSS ::first-letter pseudo element
In a block-level container, the ::first-letter pseudo-element applies a style to the first letter of the first line. Inline-level items like photos and inline tables are not selected by it. Punctuation that comes before or right after the first letter is not recognized by the ::first-letter pseudo-element. This is true even in cases where the initial character is actually a number.
Syntax
Following is the syntax of CSS::first-letter pseudo element
::first-letter {
css declarations;
}
Example
Let's look at the following example, where we are going to use the ::first-letter pseudo-element
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
font-size: 40px;
color: #DE3163;
}
body {
font-family: verdana;
background-color: #D5F5E3;
}
</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>
When we run the above code, it will generate an output consisting of the text where the first letter is applied with CSS displayed on the webpage.
Example
Considering another scenario, where we are going to use the ::first-letter pseudo-element with punctuation mark.
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
font-size: 40px;
color: #DE3163;
}
body {
font-family: verdana;
background-color: #D5F5E3;
color: #A569BD;
}
</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 which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more.</p>
</body>
</html>
On running the above code, the output window will pop up, displaying the text where the first letter is applied with CSS on the webpage.
Example
In the following example, we are going to use the ::first-letter pseudo-element with digits.
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
font-size: 40px;
color: #145A32;
}
body {
font-family: verdana;
background-color: #D6EAF8;
color: #DE3163;
}
</style>
</head>
<body>
<h2>Indian Cricketers</h2>
<p>1Mahendra Singh Dhoni is an Indian professional cricketer, who plays as a wicket-keeper-batsman. Widely regarded as one of the world's greatest wicket-keeper-batsmen and captains in the history of the sport, he is known for his explosive batting, wicket-keeping and leadership skills.</p>
<p>2Virat Kohli is an Indian international cricketer and the former captain of the Indian national cricket team. He currently represents Royal Challengers Bangalore in the IPL and Delhi in domestic cricket. Kohli is widely regarded as one of the greatest batsmen in the history of the sport. </p>
</body>
</html>
When we run the above code, it will generate an output displaying the text where the first letter is applied with CSS on the webpage.
202 Views
