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.