How to extend css class

Question

I have requirement to extend particular CSS style. For example, I'm using 3rd party DLL, which assign the CSS class style dynamically to particular control. I want to create a css class with same name in my asp.net project, Where both the styles from 3rd party DLL and my project CSS class style gets applied to control.

For say, 3rd party is having class by name

.VerticalAlign
{
   vertical-alignment:center;
}

Now i create Class by name .VerticalAlign { color : #f3f3f3 }

When i apply the above class to control, I need to have both vertical-alignment and color applied to my control.

If it is not possible with same name, is there any possibility of creating css style with different class name which inherits properties from CSS Class defined in 3rd party dll.

Answer 1

The "C" in CSS stands for Cascading which means styles can add to or supercede preceding CSS rules. So your example of declaring the classs name again with the style you wish to extend on the original declaration is the proper way to do this.

Answer 2

You have it right; retain the same name, add the new properties and they should be applied.

/* From DLL */
.foo { color: blue; }

/* Your Style */
.foo { text-align: center; }

/* --- Final outcome --- */
.foo {
  color: blue;
  text-align: center;
}

You may run in to problems with which takes precedence though (if they both have color which color style wins). e.g.

/* From DLL */
.foo { color: red; }

/* Your code */
.foo { color: blue; }

You'll either have to use !important (hack-ish) or specify a greater specificity (i.e. include the tagname or another class name or an ID).