CODEWITHSUNDEEP
htmlcssfirefox
xr280xr
xr280xr

Reputation: 13282

Why are external stylesheet styles overriding internal and inline styles?

I'm working in a site that has a global stylesheet that (badly, IMO) sets styles on element types. I'm building some ASP.NET user controls for various pages and I keep running into issues where my internal and inline styles are overridden by the styles in the global stylesheet. I'm using Firefox. For example, I just added a control with a table in it. While developing, I have the style declared internally in the user control (so it's not in the page head). The external global.css stylesheet has declared:

div#copy table {
  width: auto;
}

My internal declaration has:

table.MMPointBalance {
  border: 0 none;
  border-collapse: collapse;
  display: inline-block;
  width: 200px;
}

width:200px is being overridden to auto by the external stylesheet. In other similar cases, I've been having inline declarations on Telerik controls being overidden by some very genearal global.css styles. (false statement). Internal and inline are supposed to take priority. I would think the selector of the inline style above would also be more specific than the global. Why isn't it applied?

Upvotes: 1

Views: 2973

Answers (2)

mbulman
mbulman

Reputation: 470

The rule using div#copy takes precedence because using the ID there makes the overall rule more specific. You can either alter one of the rules, or use !important

In other similar cases, I've been having inline declarations on Telerik controls being overidden by some very genearal global.css styles.

Inline styles (using the style attribute) will only be overridden by external styles if !important is used.

Upvotes: 2

DaniP
DaniP

Reputation: 38252

Specificity for CSS and Priority are tricky to handle sometimes, in this case:

This selector is much more specific because it is selecting a parent specific div with id and then his table child.

div#copy table

This is just setting a table with class:

table.MMPointBalance

Also if you have !important declarations on the global.css you have to handle that with the same or more specific !important

Upvotes: 3

Related Questions