- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
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
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 −
- Related Articles
- CSS :first-letter pseudo-element
- The ::first-letter Pseudo-element in CSS
- Setting Spaces between Letters with CSS letter-spacing Property
- Creating Attractive First Lines with CSS ::first-line
- Styling Tables with CSS
- Styling Lists with CSS
- Styling Links with CSS
- Styling Links Working with CSS
- Styling Tables Working with CSS
- Capitalizing first letter of each word JavaScript
- Capitalize only the first letter after colon with regex and JavaScript?
- Styling Forms with CSS Attribute Selectors
- Pandas dataframe capitalize first letter of a column
- Delete duplicate elements based on first letter – JavaScript
- Grouping names based on first letter in JavaScript

Advertisements