CSS make first letter stand out
You can make a cool effect where the first letter of a paragraph stands out using a special CSS pseudo-element. This can make the content on a page more appealing.
The :first-letter pseudo-class
Attach the :first-letter pseudo-class to the paragraph (in the stylesheet) whose first letter you want affect.
Example:
/*The css that will affect the first letter*/
p.one:first-letter {color: #00627A; font-family: georgia; font-size: 48px;}
<!-- the paragraph whose first letter will be affected -->
<p class="one">
Once upon a time in a land far far away..
</p>
Output:
Once upon a time in a land far far away..
Alternatively, you can make the entire first line of a paragraph stand out. Learn how to do that in our CSS make first line stand out tutorial.