change an attribute of css

newbie question in css:

I have the following style defined:

TABLE.tabulardata th {
    font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    background: #CAE8EA url(images/bg_header.jpg) no-repeat;
}

I want to create an identical style but with different background color.

question: is it possible to parameterize the attribute. Background color in this case Or do i need to copy the same style again

From stackoverflow

• Like this?

  .myclass {
      font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
      background: url(images/bg_header.jpg) no-repeat;
  }
  
  
  TABLE.tabulardata th {
      background-color: #CAE8EA;
  }
  

  Then just add "myclass" to any element you want to share the attributes..

  Jeriko : If you like this kind of thing, you might want to check out something like LESS - http://lesscss.org/ You can declare variables to hold styles, and call them whenever you want, to reuse / mix a bunch of styles together into new ones :)

  balalakshmi : thanks Jeriko for the quick answer. that helped me I will look into the LESS option as well :)

  Jeriko : LESS and HAML were great finds for me - they turn the most boring part of being a developer (IMO, at least) into a breeze. Glad to help!

• background-color: red

  Sohnee : This question isn't about setting the background-color (he has already done that in the example in the question) it is about having a similar style between elements, with some differences. See Jeriko's answer.

• this is not possible with pure css. what you can do is to create 3 styles with classes, one being common two both and then assign them to an element

  .font { font-family: Linux Biolinum; }
  .red { color:red; }
  .blue { color:blue; }
  
  <div class="font red">red</div>
  <span class="font blue">blue</span>
  

• One way would be:

  TABLE.tabulardata th, TABLE.tabulardataOther th {
      font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
      background: #CAE8EA url(images/bg_header.jpg) no-repeat;
  }
  
  TABLE.tabulardataOther th {
      background: #FFF url(images/other_header.jpg) no-repeat;
  }
  

  This works because of CSS precedence. The first line sets tabulardata and tabulardataOther to the same style. Then the second line overrides just the background of tabulardataOther (leaving the other attributes the same).