How to highlight text in color using HTML and CSS
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
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 <mark> 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.
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.
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.