title: Stop repetition of CSS Code
body: <p>I have this 3x chunk of CSS serving 3 of my HTML Divs, the actual problem is that the code is repeated three times with only one change, that ofcourse is the background color of the divs: <code>background-color: #xxxxx;</code>  my question, is how would I go about not repeating this 3x block, but only keep 1 block but the color change on each of my Divs is different for each of these offers. </p>
  
  <p>Is this even possible, or am I going about it the right way at the moment? </p>
  
  <pre><code>.BlueOffer {
  width: 300px;
  height: 25px;
  background-color: #0099ff;
  opacity: 0.4;
  font-size: 22px;
  border-bottom: 1px SOLID #555555;
  -webkit-border-top-right-radius: 15px;
  -moz-border-radius-topright: 15px;
  border-top-right-radius: 15px;
  -webkit-border-top-left-radius: 15px;
  -moz-border-radius-topleft: 15px;
  border-top-left-radius: 15px;
  }
  .OrangeOffer {
  width: 300px;
  height: 25px;
  background-color: #F90;
  opacity: 0.4;
  font-size: 22px;
  border-bottom: 1px SOLID #555555;
  -webkit-border-top-right-radius: 15px;
  -moz-border-radius-topright: 15px;
  border-top-right-radius: 15px;
  -webkit-border-top-left-radius: 15px;
  -moz-border-radius-topleft: 15px;
  border-top-left-radius: 15px;
  }
  
  .GreenOffer {
  width: 300px;
  height: 25px;
  background-color: #66FF00;
  opacity: 0.4;
  font-size: 22px;
  border-bottom: 1px SOLID #555555;
  -webkit-border-top-right-radius: 15px;
  -moz-border-radius-topright: 15px;
  border-top-right-radius: 15px;
  -webkit-border-top-left-radius: 15px;
  -moz-border-radius-topleft: 15px;
  border-top-left-radius: 15px;
  }
  </code></pre>
  
  <p>The only change is: <code>background-color: #0099ff;</code></p>
  
  <p>HTML Code follows:</p>
  
  <pre><code>&lt;div class='GreenOffer'&gt;GREEN OFFER&lt;/div&gt;
  &lt;div class='OrangeOffer'&gt;ORANGE OFFER&lt;/div&gt;
  &lt;div class='BlueOffer'&gt;BLUE OFFER&lt;/div&gt;
  </code></pre>