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