How do I prevent my style from being overridden another style on a surrounding div?

Answer 1

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. See this article: Don't use "!important"

Answer 2

Try setting the selector as:

#Content h3#issueHeader {
    color: blue;
}

This should fix it.

Answer 3

css gives more weight to elements with more 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.

Answer 4

If id="issueHeader" is duplicated that could do it.

Answer 5

You are having what's called CSS specificity. Here's a good writup (using starwars to boot), that explains the basics in terms of points and how to calculate what will cascade:

http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html