Highlighting text in color using HTML and CSS

Updated: 02/27/2019 by Computer Hope
Highlight

Highlighting text on a web page can help bring important information immediately to the reader's attention. For example, this text is highlighted in yellow and probably caught your eye first. There are several methods for highlighting text. To proceed, select a method from the list below and follow the instructions.

Highlight using the HTML5 <mark> tag

If you are working on an HTML5 page, the <mark> tag can be used to quickly highlight text. Below is an example of the mark tag being used. If your browser supports the <mark> tag, "highlighted text" should have a yellow background.

Example code

Here is an example of <mark>highlighted text</mark> using the &lt;mark&gt; tag.

Example result

Here is an example of highlighted text using the <mark> tag.

Highlight text with only HTML code

To highlight text with HTML code and support for all browsers, set the background-color style, as shown in the example below, using the <span> HTML tag.

Example code

<span style="background-color: #FFFF00">This text is highlighted in yellow.</span>

Example result

This text is highlighted text in yellow.

Tip

In the example above, the <span> HTML tag has a background-color code of #FFFF00, which is yellow. In this case, the word "yellow" could have also been used in place of the color code, or any other color name for that matter.

Tip

With the same code, you could also highlight one or more words within a paragraph to draw attention to a specific section of the text.

Highlight text with CSS & HTML

You can also create a CSS class and set the "background-color" attribute, as shown in the example below.

Example code

<style>
body { background-color:blue; }
.highlightme { background-color:#FFFF00; }
p { background-color:#FFFFFF; }
</style>

In the CSS code above, there are three elements being defined. First, the body background color is set to blue, second, a new class called "highlightme" with a yellow background, and finally, the paragraph tag has a white background.

If you want to use the "highlightme" class to highlight your text, you can create a <span> tag in your HTML which references the CSS class.

Example code

<span class="highlightme">test</span>

How to highlight a complete paragraph

The CSS class or style class mentioned above could also be applied to a paragraph tag if you wanted to highlight a complete paragraph as shown below.

Example code

<p style="background-color: #FFFF00">This whole paragraph of text is highlighted in yellow.</p>

Example result

This whole paragraph of text is highlighted in yellow.

Additional information