title: How to specify the order of CSS classes?
body: <p>I'm a little confused about CSS and the <code>class</code> attribute. I always thought, the order in which I specify multiple classes in the attribute value has a meaning. The later class could/should overwrite definitions of the previous, but this doesn't seem to work. Here's an example:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
      .extra {
          color: #00529B;
          border:1px solid #00529B; /* Blue */
          background-color: #BDE5F8;
      }
  
      .basic {
             border: 1px solid #ABABAB;
      }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;input type="text" value="basic" class="basic"/&gt;
      &lt;input type="text" value="extra" class="extra"/&gt;
      &lt;input type="text" value="basic extra" class="basic extra"/&gt;
      &lt;input type="text" value="extra basic" class="extra basic"/&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I would expect, the third example with <code>class="basic extra"</code> should have a blue border, since the in extra specified border would overwrite the border from basic. </p>
  
  <p>I'm using FF 3 on ubuntu 9.04</p>