title: CSS - Extending class properties
body: <p>I'm pretty new to CSS and have been finding my way around so far.
  I am creating these button like links with shadows and stuff. Now there are several such buttons required on the site - everything about the buttons is same - except few properties change like width and font size.</p>
  
  <p>Now instead of copying the same code - over and over for each button - is there a way of extending the button and adding just the properties that change.</p>
  
  <p>Example of two buttons - css</p>
  
  <pre><code>.ask-button-display {
  background: #8BAF3B;
  border-radius: 4px;
  display: block;
  letter-spacing: 0.5px;
  position: relative;
  border-color: #293829;
  border-width: 2px 1px;
  border-style: solid;
  text-align:center;
  color: #FFF;
  width:350px;
  font-size: 20px;
  font-weight: bold;
  padding:10px;
  }
  
  
  .ask-button-submit {
  background: #8BAF3B;
  border-radius: 4px;
  display: block;
  letter-spacing: 0.5px;
  position: relative;
  border-color: #293829;
  border-width: 2px 1px;
  border-style: solid;
  text-align:center;
  color: #FFF;
  font-weight: bold;
  width:75px;
  font-size: 12px;
  padding: 1px;
  }
  </code></pre>
  
  <p>And this is how I'm currently using it in my html</p>
  
  <pre><code>&lt;a href="/" id="ask-question-link" class="ask-button-display"&gt;Ask a Question&lt;/a&gt; &lt;a href="/" class="ask-button-submit" id="ask-button-submit"&gt;Submit&lt;/a&gt;
  </code></pre>
  
  <p>So I'm wondering if there is a cleaner way to do this - like</p>
  
  <pre><code>.button {
  /* PUT ALL THE COMMON PROPERTIES HERE */
  }
  
  AND THEN SOMEHOW EXTEND IT LIKE
  .button #display {
  /* THE DIFFERENT PROPERTIES OF Display BUTTON */
  }
  
  .button #ask {
  /* THE DIFFERENT PROPERTIES OF Ask BUTTON */
  }
  </code></pre>
  
  <p>But I'm not sure how to do this.
  Thanks for your inputs</p>