How do I change color of an H1 tag in CSS

[Name Trader]

I have 2 H1 headings in my index file. One is colored gray, and the other I've just added and want the color to be blue. How do I add the code to my CSS file to achieve this? Here is my current CSS code...

h1,h2,h3,h4,h5,h6
{
color: #666;
margin: 0 0 1em 0;
font-weight: 100;
line-height: 1.5em;
}

Comment: Everything from here is indented

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
{
color: inherit;
text-decoration: none;
}

.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6
{
color: #fff;
}

I tried adding (with <h1 class="blue"> in the index file), without success...

h1 blue
{
color: #0000FF;
}

 

[Paul]

First, add a class to the blue h1 tag. For this example, we'll call the class "blue":

<h1 class="blue">Hello, World!</h1>

Then, add the following to your CSS:

h1.blue
{
color: #00f;
}

You can change the color as you see fit; I used pure blue (#00f) as an example.

If you wanted to apply this to all tags with the "blue" class, not just h1 tags, you could remove the h1 part:

.blue
{
color: #00f;
}

 

[Name Trader]

Thanks Paul. That worked great. So it looks like I was missing a dot (.)