How To Highlight Text In Color Using HTML And CSS - Computer Hope

How to highlight text in color using HTML and CSS Updated: 05/06/2024 by Computer Hope

Highlighting text on a web page helps 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 one from the list below and follow the instructions.

• Highlight using the HTML5 <mark> tag.
• Highlight text with only HTML code.
• Highlight text with CSS & HTML.
• How to highlight a complete paragraph.
• Related information.

Highlight using the HTML5 <mark> tag

If you are working on an HTML5 page, the <mark> tag can quickly highlight text. Below is an example of the how to use the mark tag and its output. 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 using HTML (HyperText Markup Language) code that is supported in all browsers, set the background-color style. This action can be performed by wrapping the text in a <span> tag, then setting the color using the style attribute, as shown below.

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 be 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 use a CSS (Cascading Style Sheets) class to create a highlight effect on text. To do so, you may create a CSS class using <style> tags 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.

To use the "highlightme" class to highlight your text, you can create a <span> tag in your HTML which references the newly-created 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.

Related information

• See our CSS, highlight, and HTML definition for additional information related pages.
• CSS and HTML color help and support.