From http://www.w3schools.com (Copyright Refsnes Data)

CSS :first-letter pseudo-element

Example

Add a special style to the first character of a paragraph:

<html>
<head>
<style type="text/css">
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
</style>
</head>

<body>
<p>This is a text.</p>
</body>
</html>

Try it yourself »

Definition and Usage

The :first-letter pseudo-element adds a style to the first character of a text.

Note: The following properties apply to the :first-letter pseudo-element:

font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if 'float' is 'none')
text-transform
line-height
float
clear

Pseudo-elements can also be combined with CSS classes:

p.article:first-letter {color:#FF0000}

<p class="article">A paragraph in an article</p>

The example above will set the first letter of all paragraphs with class="article" to red.

Browser Support

The :first-letter pseudo-element is supported in all major browsers.

CSS tutorial: CSS Pseudo elements

Complete CSS Reference

CSS :first-letter pseudo-element

Example

Definition and Usage

Browser Support

Related Pages