Style the First Line
By Stephen Bucaro
To make your text more inviting, you can set a special style for the first
line of text in a paragraph. Use the first-line pseudo-element selector
to style the first line in a paragraph.
• A pseudo-element selector selects part of another element that would not be
defined by the document tree.
<style type="text/css">
p:first-line
{
font-weight:bold;
}
</style>
"But I don't want to go among mad people," Alice remarked. "Oh, you can't help
that," said the Cat: "we're all mad here. I'm mad. You're mad." "How do you know
I'm mad?" said Alice. "You must be," said the Cat, "or you wouldn't have come here."
- Alice and the Cheshire Cat in Alice In Wonderland by Lewis Carroll.
One problem with the code shown above is that resizing the browser window will
change the amount of text displaying the special style. If this is what you want,
no problem. If not, to solve this problem, set a fixed width for paragraph elements,
as shown below.
<style type="text/css">
p
{
width:400px;
}
p:first-line
{
font-weight:bold;
}
</style>
But I don't want to go among mad people," Alice remarked. "Oh, you can't help
that," said the Cat: "we're all mad here. I'm mad. You're mad." "How do you know
I'm mad?" said Alice. "You must be," said the Cat, "or you wouldn't have come here."
- Alice and the Cheshire Cat in Alice In Wonderland by Lewis Carroll.
Another problem with the code shown above is that it will apply to all paragraph
elements on your webpage. If this is what you want, no problem. If not, to solve this
problem, add a class attribute to the specific paragraphs to which you want to
apply the first line style, as shown below.
<style type="text/css">
p.myclass
{
width:400px;
}
p.myclass:first-line
{
font-weight:bold;
}
</style>
<p class="myclass">"But I don't want to go among mad people," Alice remarked. "Oh,
you can't help that," said the Cat: "we're all mad here. I'm mad. You're mad." "How do
you know I'm mad?" said Alice. "You must be," said the Cat, "or you wouldn't have come here."
- Alice and the Cheshire Cat in Alice In Wonderland by Lewis Carroll.</p>
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
