How do I format the first line or first letter of a paragraph?
Author: Deron Eriksson
Description: This CSS tutorial describes how to use the :first-line and :first-letter pseudo-elements to format the first line and first letter of a paragraph.
Tutorial created using: Windows XP


The :first-line pseudo-element can be used to format the first line of a paragraph. The :first-letter pseudo-element can be used to format the first character of a paragraph. Sometimes, :first-letter is used to start a paragraph with a large initial capital letter.

The style-test.html file demonstrates the :first-line and :first-letter pseudo-elements. The first line of the sample paragraph is set to bold, and the first letter of the paragraph begins with a large letter set to 2em.

style-test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Style Test</title>
<style type="text/css">
p:first-line { font-weight: bold; }
p:first-letter { font-size: 2em; }
</style>
</head>
<body>
<p>
Here is some meaningless stuff.
Here is some meaningless stuff.
Here is some meaningless stuff.
</p>
</body>
</html>

The display of style-test.html in IE7 is shown below.

Example paragraph with first line set to bold and first letter set to 2em