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.