Third party tool styles overriding my styles?


You might come across this scenario wherein, you want to override a css class of a third party add-in, but still not able to apply your styles. Well the reason is nothing but the concept of cascading coming into play. In this case, your third party selectors have the higher precedence over your site stylesheet.

Well the fix is pretty simple and useful. Use the !important property with the respective css property you want to override in your stylesheet.

For example, i would like to override the css selector named ‘dxic’ of a third party tool, i use in my web site. I would simply define the selector as below:

.dxic

{

width:200px;

border:1px solid #333;

}

But for some reason, it does not get applied. The web site still displays the style defined by the third party tool stylesheet. The concept is that of cascading here. The solution to this problem would look something like below:

.dxic

{

width:200px !important;

border:1px solid #333 !important;

}

Voila! Now, my styles will have precedence over the styles defined by the third party tool.

Concept of cascading in CSS


Most of us know that Cascaded Style Sheet abbreviates to CSS . But why is it called so? What is the cascading happening out in the stylesheet. Well the concept is pretty simple, but powerful.

You might come across scenarios wherein, you want to override a css class of a third party add-in, but still not able to apply your styles. Well the reason is nothing but the concept of cascading coming into play. Let me get into a bit theoretical  here.

Stylesheets are divided into three types:

  1. Author StyleSheet – Stylesheet created by the author of the webpage
  2. User StyleSheet – StyleSheet are set by the user of the Web page. These allow the user to have more control over how the pages display.
  3. User Agent StyleSheet – StyleSheet defined by your browser.

The order of precedence is Author with the highest priority, User and then User Agent StyleSheet. Again, the exception would be the !important rule, wherein the StyleSheet  with selector carrying properties with !important will be given precedence over any other.

You might wonder, then a scenario can come with conflicts in using this property. Yes, such scenarios arise. In that case, the order of precedence is given to the Author Stylesheet, followed by User and then the User Agent one.

Cascade Conflict Resolution:

To resolve conflicts, Web browsers use the following sorting order to determine which style has precedence and will be used:

  • First, look for all declarations that apply to the element in question, and for the assigned mediatype.
  • Then look at what style sheet it’s coming from. As above, author style sheets come first, then user, then user agent. With !important user styles having higher precedence than author !important styles.
  • The more specific a selector is, the more precedence it will get.

For example, a style on “div.co p” will have a higher precedence than one just on the “p” tag.

  • Finally, sort the rules by the order they were defined. Rules that are defined later in the document tree have higher precedence than those defined earlier. And rules from an imported style sheet are considered before rules directly in the style sheet.

Hope this article was useful.