If you want to know how to highlight text on your website using CSS like this for example. This is a highlighted text area.
The HTML code can be any type of tag. But the example above I’m using span tag like this. The tag provides no visual change by itself. The tag is just a way to add a style to a part of a text or a part of a document’s content with no other styling. If I use div in the above example then the highlighted text would also have a line break which I don’t want in this case.
This text is highlighted in orange. This text is highlighted in light green. This text is highlighted in bright yellow.
You can do this by adding inline styling, which means the style is in the HTML Document. See the code below.
<span id=”orange-highlight” style=”background-color: #ff9f2f;”>This text is highlighted in orange. </span><span id=”green-highlight” style=”background-color: #67ff5f;”>This text is highlighted in light green. </span> <span id=”yellow-highlight” style=”background-color: #fff15f;”>This text is highlighted in bright yellow.</span>
Or strip out all the style elements and put them in a stylesheet. So you’re stylesheet would look like below. And in the HTML then you will have only the <span id=”green-highlight”> and so on.
#green-highlight {
background-color: #67ff5f;
}
#yellow-highlight {
background-color: #fff15f;
}
#orange-highlight {
background-color: #ff9f2f;
}
