How do I prevent my style from being overridden another style on a surrounding div?
You can throw the !important
attribute on h3#issueHeader
to force the browser to use that style
h3#issueHeader {
color: blue !important;
}
However, it is only partially supported in IE6
Additionally, this should only be used as a last resort to the other solutions purposed. This is because if users of your website want to override your style, important becomes a useful tool for that.
css gives more weight to elements with more specific selectors. So if you want #Content h3
not to override h3#issueHeader
, give it another selector: e.g. #Content h3#issueHeader
If your h1...hx elements are meant to be generally #405679, set them to that without the #Content selector. Then override them with a more specific selector when you need to.
Try setting the selector as:
#Content h3#issueHeader {
color: blue;
}
This should fix it.