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

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

htmlfontscolors


Solution 1:[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:

Solution 2:[2]

If you don't wanna use CSS.

<h2><span style='color:red'>Who</span> we are.</h2>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Severin Spörri

Related Questions