Highlight Text
By Stephen Bucaro
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:
• Highlight Text
• Style the First Letter
• Use word-wrap Property to allow Line Breaks in the Middle of Words
• Set List Properties
• Style the First Line
• Set the Font Style
• Set the Border Width
• Set the Font Properties
• How to Define and Apply a Style Class
• Set the Text Case
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
