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:
- First, we wrote the HTML basic syntax. And the title is set to be “color of one word”.
- 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.
- Then 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.
So, you can also change the color of a specific word by placing <span> tag inside <p> tag. If you need to change the color of two separate words in a paragraph, you should set the span with a different classname, see the given example code.
.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 displayed in a different color
