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:

In the body section, we create a <p> tag with some text.
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.
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:

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”
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.
See the above output, the two separated words will be displayed in a different color