Deriving CSS

[dnimrodx]

Hello,

How can I derive a CSS style from another one. Have this example in consideration:

.feedback-MNU
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: bold;
color: #ff0000;
word-spacing: normal;
background-color: #a0a0a0;
}

Now, how to use the above style, but only changing its color, instead of having to repeat the whole style?

.feedback-MNU
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: bold;

color: #00ff00;

word-spacing: normal;
background-color: #a0a0a0;
}

All suggestions/remarks are welcome!
Thank you,

d#Nimrod

[grahamstewart]

You could declare all the common properties in one go and then declare the differences. like this:

.feedback-MNU, .other-feedback 
{  
  font-family: Verdana, Arial, Helvetica, sans-serif;  
  font-size: 10pt;  
  font-weight: bold;  
  color: #ff0000;  
  word-spacing: normal;  
  background-color: #a0a0a0;  
} 
  
.other-feedback { 
 color: #ff0000; 
} 

or you could make another class that just changes the colour and use it with the original class in the html

CSS:

.feedback-MNU 
{  
  font-family: Verdana, Arial, Helvetica, sans-serif;  
  font-size: 10pt;  
  font-weight: bold;  
  color: #ff0000;  
  word-spacing: normal;  
  background-color: #a0a0a0;  
} 
  
.highlight { 
  color: #ff0000; 
} 

HTML:

<div class="feedback-MNU"> 
 Some normal feedback. 
</div> 
  
<div class="feedback-MNU highlight"> 
 Some highlighted feedback. 
</div> 

[edited by: grahamstewart at 6:03 pm (utc) on Feb. 17, 2004]

[BlobFisk]

I think that using two classes may do your job.

.class1 { 
 ... style rules ... 
 color: #369; 
} 
.class2 { 
 color: #009; 
} 

Then in your HTML:

<p class="class1 class2"> ... </p>

In this case, you will get all the style rules for class1, except the rules in class2 that supercede the rules of class1 (in this example the color rule). The text in the <p>aragraph will have all the style rules of class1, except that the color will be #009.

HTH

Note to self: Type faster!