Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

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

Highlight Text

You might want to highlight some text within a paragraph to give it special attention. To highlight text within a paragraph, place the text to be highlighted within a <span> element, and set the color property of the span to the highlight color. The example below shows text highlighted with the color red.

<p>"But I don't want to go among mad people," Alice remarked. "Oh, you can't help that," said the Cat: <span style="color: red;">"we're all mad here. I'm mad. You're mad."</span> "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>

"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.

Some people define "highlighting" as changing its background color. To highlight text within a paragraph by changing its background color, place the text within a <span> element, and set the background-color property of the span to the highlight color. The example below shows text highlighted with the color yellow.

<p>"But I don't want to go among mad people," Alice remarked. "Oh, you can't help that," said the Cat: <span style="background-color: yellow;">"we're all mad here. I'm mad. You're mad."</span> "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>

"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.

The above examples use inline style. You can also highlight text by defining a style class in an embedded style block or in an external linked style sheet. The example below shows a style class named highlight applied to a span.

<style type="text/css">
.highlight
{
font-weight:bold;
color: red;
background-color: yellow;
}
</style>

<p>"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." <span class="highlight">"How do you know I'm mad?" said Alice.</span> "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>

"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.

Note that in the style class I defined highlight as meaning; make the text bold, a different color, and with a different color background. Too much?

You might want to highlight some text within a paragraph to give it special attention. To highlight text within a paragraph, place the text to be highlighted within a <span> element, and set style properties of the span.

More CSS Quick Reference:
• Set the border-collapse
• Define CSS Rollover Effects
• How to Define and Apply a Style Class
• CSS Units of Measurement
• Set the Text Alignment
• CSS background-clip Property
• Context selectors
• Specifying Color
• Set an Element's Overlap (z-index)
• Set List Bullets Position

RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro



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