Custom Class Not Overriding Other CSS

Question

I am by no means a CSS expert, so I probably just don't understand something simple here.

I have a site I am maintaining. Most of the site has a dark background with white text. I was asked to change a couple of pages to black text on white background.

I created a class named .blog in the CSS, it looks like this:

.blog{
color:rgb(0,0,0);
background-color:rgb(255,255,255);
}
.blog h1,h2,h3,h4,h5,h6
 {
color:rgb(0,0,0);
}
.blog a:link,a:visited,a:hover
{
color:rgb(0,0,0);
}   

Earlier in the file is this:

body,a,.white{color:#fff;}

When I wrap a chunk of a page in the text and background change but the links and headlines remain white (and are thus invisible on the white page).

When I check using Firebug it shows my blog class being applied, including when I select the headline or link elements. Yet of course it is not.

Can anyone suggest a reason for this? Or perhaps where I should look for the most likely solution?

Answer 1

You have to add the class before the element to specify under what circumstances which item is being selected.

Thus

.blog h1,h2,h3,h4,h5,h6
 {
color:rgb(0,0,0);
}

should be

.blog h1, .blog h2, .blog h3, .blog h4, .blog h5, .blog h6 {
color:rgb(0,0,0);
 }

and so on.