- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
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>Output
This will produce the following result −
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
body > * {
background-color: slategrey;
}
::first-letter {
font-size: 1.6em;
color: darkviolet;
background-color: silver;
text-shadow: -15px 8px palevioletred;
}
</style>
</head>
<body>
<h2>Proin ut diam eros
<p>Donec rutrum a erat vitae interdum. </p>
<p>Integer eleifend lectus sit amet purus semper, ut pharetra metus gravida.</p>
</body>
</html>Output
This will produce the following result −
Published on 12-Mar-2021 11:25:32
- Related Questions & Answers
- CSS :first-letter pseudo-element
- The ::first-letter Pseudo-element in CSS
- Creating Attractive First Lines with CSS ::first-line
- Setting Spaces between Letters with CSS letter-spacing Property
- Styling Tables with CSS
- Styling Lists with CSS
- Styling Links with CSS
- Capitalizing first letter of each word JavaScript
- Styling Links Working with CSS
- Styling Tables Working with CSS
- Capitalize only the first letter after colon with regex and JavaScript?
- Pandas dataframe capitalize first letter of a column
- Grouping names based on first letter in JavaScript
- Array filtering using first string letter in JavaScript
- Styling Forms with CSS Attribute Selectors
Advertisements