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.

CSS shortcuts


Using shortcuts in css, makes your CSS look neat, clean and compressed. It should be always taken into account that, you cannot simply play around with shortcuts. Different browsers, behave differently to the shortcuts.

Following are some of the simple and effective shortcuts that i use in my css:

Using Zeros :You need not mention any units with zero’s, be it pt, px, em or any other measurement types.

Normal Method – #spcborder{ border:1px 0px 0px 2px;}

Shortcut Method – #spcborder{ border:1px 0 0 2px;}

Value Shortening : This is normally done with hex color codes.

Normal Method – h1{ color:#333333; border-color:#335577;}

Shortcut Method – h1{ color:#333;border-color:#357;}

One line coding : I would recommend this approach for selectors with atmost 3 properties and non lengthy.

Normal Method

h1{

color:#333333;

border-color:#335577;

font-size : 12px;

}

Shortcut Method – h1{ color:#333;border-color:#357; font-size : 12px;}

Property Grouping : This can be used mostly when you use the grouped properties in css, like border, background,margin, padding etc.

Normal method – div.main{padding-top:2px; padding-right:3px; padding-bottom:2px; padding-left:3px;}

Shortcut method – div.main{padding:2px 3px 2px 3px;}

Further compressing – div.main {padding:2px 3px;}

Another scenario

Normal method – div.main{padding-top:2px; padding-right:3px; padding-bottom:2px; padding-left:3px;}

Shortcut method – div.main{padding:2px 3px 2px 3px;}

Further compressing – div.main {padding:2px 3px;}

The trick here is to use:

  • TOP RIGHT BOTTOMLEFT approach on any such grouped properties, if there are 4 values grouped.
  • TOP & BOTTOMRIGHT & LEFT approach on any such grouped properties, if there are 2 values grouped.
  • In case of 3 valued groups, keep in mind the cyclic order of  TOP RIGHT BOTTOMLEFT . The one missing would take the value of the respective pair, in the grouping.

padding:2px 3px 5px; would imply a padding:2px 3px 5px 3px; The last value (left) is implicit and equals to the value of right.

These shortcuts work easily independent of any browser. It would be good if you use these css shortcuts in your stylesheet.