I think that the background value in “#front-page #hottags” is your problem
#front-page #hottags {
background:none repeat scroll 0 0 transparent;
left:0;
overflow:hidden;
position:absolute;
top:0;
width:150px;
}
Try removing it or changing it to a color value.
Correct. Just changing your selector above from #hottags to #front-page #hottags should be enough, it should override the rule in the imported stylesheet:
#front-page #hottags { background: #DFDFDF; border: 1px solid #888; }
Try the following if the above (unexpectedly) doesn’t work:
#front-page #hottags { background-color: #DFDFDF !important; border: 1px solid #888; }
Thanks to both of you for help, but what exactly does the CSS !important do?
from w3
“CSS attempts to create a balance of power between author and user style sheets. By default, rules in an author’s style sheet override those in a user’s style sheet (see cascade rule 3).
However, for balance, an “!important” declaration (the delimiter token “!” and keyword “important” follow the declaration) takes precedence over a normal declaration. Both author and user style sheets may contain “!important” declarations, and user “!important” rules override author “!important” rules. This CSS feature improves accessibility of documents by giving users with special requirements (large fonts, color combinations, etc.) control over presentation. “
It basically does exactly what it says.
Normally, styles are applied in the order they appear in – lets say you first define the color red for the h1 tag, and further down you define the color blue for h1, or for every child of the body tag or whatever. h1 would then appear blue, but not if you add !important to the first rule. !important overrides rules that appear later.
It makes sense if you need your rules in a specific order but want to define some exceptions.
It’s also often misused as a quick and lazy way to resolve conflicts in the stylesheet – people often slap an !important onto the rule they want to see applied when they have accidentally overriden it with some other stuff later in the document.
In your case, it wasn’t necessary because your rule appears after the one from the imported stylesheet – it just didn’t work because #front-page #hottags is a more specific selector than just #hottags.
When I overwrite something, especially in bbPress, I ususally clear that was there before hand.
#front-page #hottags {
background: none;
border: none;
background-color: red;
border: 1px solid blue;
}
That way you don’t need to worry about things that are not implemented in all browsers. The more I work with charities and the more I test on different combinations of OS/Browsers and even mobile platforms, the more I code my CSS like it’s 2000 again. Amazing how it all still works and looks the same.
