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.
Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Style the First Line

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>

RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268