• Post category:HTML

Easy Way to Change Color of Specific Word in HTML

HTML Change Color of one Word

In this article, we will see how to change the color of one word in HTML.

Step by Step guide to changing color

<!DOCTYPE html>
<html>
<head>
 <title>color of one word</title>
</head>
 <style type="text/css">
span{
  color: red;
  }
</style>
<body>

< p>The <span>sun</span> shines everywhere, not just on the beach </p>
</body>
</html>

Output:

html change color of one word

  1. In the body section, we create a <p> tag with some text.
  2. I want to change the color of only the word “sun” to red in the paragraph text. So, I put the word “sun” inside the <span> tag.
  3. In the <style>, we styling for span only, and the color is set to be red. So, see the above output the span word “sun” is displayed in red color.
.A{
color: blue;
}
.B{
color: green;
}
<p>The <span class="A">sun</span> 
shines everywhere, not just on the <span class="B">beach</span>
</p>

Output:

html change color of one word

  1. Here, I want to change the color of the word “sun” to blue and “beach” to green. So, I put the word “sun” inside the <span> tag with classname “A” and the word “beach” inside the <span> tag with classname “B”
  2. In CSS, we select the A classname using the dot operator and then set the color to blue. Then we select the ‘B’ classname using the dot operator and then set the color to green.
  3. See the above output, the two separated words will be displayed in a different color

Leave a Reply