Highlighting text in color using HTML and CSS

Updated: 01/05/2018 by Computer Hope

HighlightHighlighting text on a web page can help bring important information immediately to the readers attention. For example, "This text is highlighted in yellow and probably caught your eye first."

Highlight using the HTML5 <mark> tag

If you are working with an HTML5 page, the <mark> tag can be a quick and easy way of highlighting or marking text on a page. Below is an example of the mark tag being used and, if supported by your browser, "highlighted text" should be highlighted.

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

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

Highlight text with only HTML code

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

<span style="background-color: #FFFF00">Yellow text.</span>

In the above example, 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. Substituting this code for your color code allows you to change the background highlight color into any color of your choice.

With the same code, you could also highlight one word or several words within a paragraph, to draw attention to specific words that are most important. Below is an example of the code used to highlight "draw attention" in this paragraph.

<span style="background-color: #FFFF00">draw attention</span>

Using code similar to the example above, you can highlight specific words within a paragraph and not the entire paragraph.

Highlight text with CSS & HTML

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

body { background-color:blue; }
.highlightme { background-color:#FFFF00; }
p { background-color:#FFFFFF; }

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

After setting up the CSS code, if you wanted to use the "highlightme" class to highlight your text, you would use the <span> tag and reference the CSS class, as shown in the example code below.

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

How to highlight the 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.

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

Additional information