Changing H2 Element Color

In coding there are often many different solutions to a given problem. This is especially true when it comes to styling an HTML element.

One of the easiest things to change is the color of text. But sometimes it seems like nothing you try is working:

<style>
  h2 .red-text {
    color: red;
  }
</style>

<h2 class="red-text" color=red;>CatPhotoApp</h2>

So how can you change the color of the H2 element to red?

Option #1: Inline CSS

One way would be to use inline CSS to style the element directly.

Like with the other methods, formatting is important. Take a look again at the code above:

<h2 class="red-text" color=red;>CatPhotoApp</h2>

To use inline styling, make sure to use the style attribute, and to wrap the properties and values in double quotes ("):

<h2 class="red-text" style="color: red;">CatPhotoApp</h2>

Option #2: Use CSS selectors

Rather than using inline styling, you could separate your HTML, or the structure and content of the page, from the styling, or CSS.

First, get rid of the inline CSS:

<style>
  h2 .red-text {
    color: red;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>

But you need to be careful about the CSS selector you use. Take a look at the <style> element:

h2 .red-text {
  color: red;
}

When there's a space, the selector h2 .red-text is telling the browser to target the element with the class red-text that's child of h2. However, the H2 element doesn't have a child – you're trying to style the H2 element itself.

To fix this, remove the space:

h2.red-text {
  color: red;
}

Or just target the red-text class directly:

.red-text {
  color: red;
}