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
Selected Reading
Styling First-Letters with CSS ::first-letter
CSS can help us style the first letter of an element using the ::first-letter pseudo-element. Note that punctuation marks, digraphs and content property can change the first-letter.
The following examples illustrate CSS ::first-letter pseudo-element.
Style the first letter
The first letter of all the elements, such as <h2> and <p> here are styled using the ::first-letter pseudo element −
::first-letter {
font-size: 3em;
color: sienna;
box-shadow: -10px 0 10px green;
background-color: gainsboro;
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
::first-letter {
font-size: 3em;
color: sienna;
box-shadow: -10px 0 10px green;
background-color: gainsboro;
}
</style>
</head>
<body>
<h2>Proin ut diam eros</h2>
<p>Donec rutrum a erat vitae interdum. </p>
<p>Integer eleifend lectus sit amet purus semper, ut pharetra metus gravida.</p>
</body>
</html>
Style specific elements
Specific elements can be easily styled by using the ::first-letter pseudo element to style the first letter −
p::first-letter {
font-size: 1.6em;
color: darkviolet;
background-color: silver;
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
p::first-letter {
font-size: 1.6em;
color: darkviolet;
background-color: silver;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<p>Donec rutrum a erat vitae interdum. </p>
<p>Integer eleifend lectus sit amet purus semper, ut pharetra metus gravida.</p>
</body>
</html>
Updated on: 2023-12-27T16:45:42+05:30
1K+ Views
Advertisements