CSS Drop Caps

CSS Drop Caps

Drop Caps can easily be styled by taking advantage of the CSS pseudo-element :first-letter.

1	p:first-letter {

2	display: block;

3	float: left;

4	margin: 5px 5px 0 0;

5	color: red

6	font-size: 1.4em;

7	background: #ddd;

8	font-family: Helvetica;

9

}

This should work in all modern browsers. CSS3 introduces the ::first-letter notation to distinguish between pseudo-elements and pseudo-classes, but this new notation is not yet compatible with IE. For now use the single :first-letter notation.