|
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. 
|
AVAJAVA Web Tutorials
Total Categories: 24, Total Tutorials: 508
Cascading Style Sheets: 37 of 47 tutorials
How do I format the first line or first letter of a paragraph?
Web Tutorials
::
Cascading Style Sheets 
::
37.
How do I format the first line or first letter of a paragraph?
Cascading Style Sheets
::
37.
How do I format the first line or first letter of a paragraph?
Web Tutorials
::
Cascading Style Sheets
::
37.
How do I format the first line or first letter of a paragraph?
Cascading Style Sheets
::
37.
How do I format the first line or first letter of a paragraph?