3

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?

3
  • Most likely specificity... or the order it is placed in the DOM. Oct 4, 2013 at 21:11
  • 1
    Possible to provide a working example so we reproduce the issue? One problem might be that .blog h1,h2,h3,h4,h5,h6 should be .blog h1, .blog h2, .blog h3, .blog h4, .blog h5, .blog h6.
    – showdev
    Oct 4, 2013 at 21:13
  • There is only one way to debug this, and that is to use FireBug or its equivalents for IE and Chrome. For any element on the page it will display the entire cascade hierarchy and tell you the file that contains that particular bit of CSS. Oct 4, 2013 at 21:13

2 Answers 2

5

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.

4
  • This fixed it. Thanks. BTW, would someone care to suggest a good syntax reference for CSS online? I've actually had trouble finding one. I find plenty of "how to do X with CSS" sites, but nothing that just shows hierarchy and syntax reference.
    – valis
    Oct 7, 2013 at 17:03
  • This is a good start: net.tutsplus.com/tutorials/html-css-techniques/…
    – Paulie_D
    Oct 7, 2013 at 17:26
  • Shouldn't this be h1.blog, h2.blog, h3.blog etc.? Your syntax doesn't seem to be working for me in Chrome. Dec 8, 2015 at 20:40
  • Based on the OP's question the answer is correct. If it's not working for you, your implementation may be different. Perhaps you should pose your own question?
    – Paulie_D
    Dec 9, 2015 at 7:05
-2

You can always try and add !important to the end of your class.

For example:

background-color:rgb(255,255,255) !important;

This will override any element that is over-styling the background-color of your blog class for instance. Though I do not recommend using this all of the time as you can end up causing yourself conflicting issues but it is there for cases like this.

Definitely give it a shot and see if it fixes your issue, if it does then you have another class that is overriding your styling, or your class styling is not correctly being issued where you think it is.

4
  • Seriously.. don't ever suggest !important.. horrible practice, and can be avoided 99.9% of the time. Oct 4, 2013 at 21:15
  • 1
    It depends how you use it. It is not terrible practice, or it would be deprecated. It will absolutely allow a beginner user to find an issue with their css. Like I said in my answer, I don't recommend keeping this in the css but it can be used to help debug. Rather than vote me down for that, provide me with a better, more practical answer.
    – lockdown
    Oct 4, 2013 at 21:17
  • Well - I didn't downvote it, but you are suggesting the usage of it. Oct 4, 2013 at 21:18
  • I would also add that if you are modifying a .css file that contains thousands of css lines it can be handy to narrow down issues you may be having. Specifically between all of the major browsers.
    – lockdown
    Oct 4, 2013 at 21:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.