how to change the color of part of the h2 heading in html

Question

I have a h2 heading that says "WHO WE ARE". I need the word "WHO" to stay white and "WE ARE" to be red. I can't figure out how to do this. Please help

Answer 1

You normally have to (HTML)tag the part of the text you want to change the color of. And then use CSS to change the color. For example:

h2 {color:red;}
h2 .colorTwo {color:blue;}

<h2><span class="colorTwo">WHO</span> WE ARE</h2>

    

UPDATE: I have to improve this response since it is reaching a lot of people and I want them to start writing HTML & CSS the right way :)

That said, it is good practice to add semantics to the code you write, which is basically adding meaning to it.

So instead of using the class colorTwo you want to call it emphasized or even instead of using the span HTML element and a class, just use the em HTML element like this:

h2 {color:red;}
h2 em {color:blue; font-style: normal}

<h2><em>WHO</em> WE ARE</h2>
    

Note: see that I had to add font-style: normal to my css since the em HTML tag is interpreted by browsers as font-style: italic so I had to override it.

There is a bunch of information about the semantic web for developers. I'll leave here two links:

• https://developers.google.com/style/semantic-tagging
• https://html.com/semantic-markup/