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.

© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information