How to change the colors of specific words in a string of text with HTML and CSS?

Spread the love

Sometimes, we want to change the colors of specific words in a string of text with HTML and CSS.

In this article, we’ll look at how to change the colors of specific words in a string of text with HTML and CSS.

How to change the colors of specific words in a string of text with HTML and CSS?

To change the colors of specific words in a string of text with HTML and CSS, we use the mark element.

For instance, we write

<p>
  Enter the competition by <mark class="red">January 30, 2022</mark> and you
  could win up to $$$$ — including amazing
  <mark class="blue">summer</mark> trips!
</p>

to add text wrapped with the mark element.

Then we write

mark.red {
  color: #ff0000;
  background: none;
}

mark.blue {
  color: #0000a0;
  background: none;
}

to style the mark elements with the red and blue classes.

Conclusion

To change the colors of specific words in a string of text with HTML and CSS, we use the mark element.

Leave a Reply

Your email address will not be published. Required fields are marked *