CSS Fundamentals
Styles for Parts of a Paragraph
To draw attention to an introduction or opening statement, one common practice is to make the first letter or first line of text in a paragraph stand out from the rest of the text on the page. A paragraph is a block of text, so it has a first letter and a first line of characters, but they do not have specific HTML tags around them. To style these you can use pseudo-elements for the first-letter and first line:
The first letter of each paragraph is red.
p:first-letter { color: red; }
The first line of each paragraph is blue
p:first-line { color: blue }
Keep in mind, though, that this applies the style indiscriminately to all paragraph tags on the page. If we want to style only the first letter or line of the first paragraph in our content, we would need to style it based on its context as the first child of a particular element (let’s ID it as content).
The first letter in a paragraph within any tag with the content ID has a color of red.
#content+p:first-letter { color: red; }
<div id=“content”><p>One thing was certain…</p></div>
The only drawback to this method is that it will not work in IE6, which does not recognize the child context.
Excerpted from Speaking in Styles: Fundamentals of CSS for Web Designers, and used with the permission of New Riders and Peachpit Press.
This article was last modified on January 8, 2023
This article was first published on August 17, 2009
Commenting is easier and faster when you're logged in!
