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.