PSEUDO-ELEMENT: first-letter

Compatibility: IE5+ N6+
Version: Level 1

The :first-letter pseudo-element allows you to apply style to the first letter of an element. This is a very convenient way to enhance the appearance of the beginning of paragraphs throughout a document.

CSS2 has four pseudo-elements: :after, :before, :first-letter, and :first-line. Pseudo-elements allow you to create element-like structures which permit you to apply style to parts of a document that normally cannot be accessed using HTML. Specifically, you can add styled content before and after an element, or effect the style of the first letter or first line of an element.

Only certain CSS properties can be applied using :first-letter.
They are:

background	background-color	background-image
background-repeat	clear	color
float	font	font-family
font-size	font-style	font-variant
font-weight	letter-spacing	line-height
margin	margin-bottom	margin-left
margin-right	margin-top	padding
padding-bottom	padding-left	padding-right
padding-top	text-decoration	text-shadow
text-transform	vertical-align	word-spacing

A pseudo-element is assigned to a selector via following syntax:

selector:pseudo-element {property: value; ...;}

A pseudo-element can also be used with the value assigned as a class to a selector:

selector.classvalue:pseudo-element {property: value; ...;}

Code:
<html>
<head>
<title>first-letter test</title>
<style type="text/css">
h1.red:first-letter {color: #FF0000;}
h1.yellow:first-letter {color: yellow;}
</style>
</head>
<body>
<h1 class="red"> The first letter is red.</h1>
<h1 class="yellow"> The first letter is yellow.</h1>
<h1> The first letter is black.</h1>
</body>
</html>

Output:

The first letter is red.

The first letter is yellow.

The first letter is black.