title: CSS Inheritance - Why is a 'later' declaration being overwritten by an 'earlier' one?
body: <p>I'm new to <code>html</code> and <code>CSS</code> but through the recent work I've been doing I thought I was getting a hold of how CSS works.. And it seemed to work kind of like scope in a language like Java.</p>
  
  <p>My understanding was that, like Java, the declaration with the narrowest scope wins.. aka the most specific declaration would override its inherited versions, allowing you to, like I am trying to do, declare a set pattern for a group of objects and then if one of those needs a slightly different setting you can simply override the general rule for that one item.</p>
  
  <p>However, I'm getting the feeling this is not the case, here I have a tabbed content box I'm working on;</p>
  
  <p>The <code>html</code>:</p>
  
  <pre><code>&lt;div id="feature-tabs"&gt;
      &lt;ul id="tabs"&gt;
          &lt;li&gt;&lt;a href="#What We Do"&gt;What We Do&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a id="large" href="#What Makes Us Different"&gt;What Makes Us Different&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#Our Background"&gt;Our Background&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#Why We Do It"&gt;Why We Do It&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And of course I labelled the one list-item as "large" so that I could force its width to be a little wider so it can fit on one line.</p>
  
  <p>The <code>CSS</code>:</p>
  
  <pre><code>ul#tabs li a {
      width: 144px;           //TRYING TO OVERRIDE THIS DECLARATION
      height: 33px;
      color: #42454a; 
      background-color: #fff; 
      border-left: 1px solid #000;
      border-right: 1px solid #000; 
      text-decoration: none;
      display: block;
      text-align: center;
      border-radius: 3px;
  }
      a#large {
          width: 155px;          //WITH THIS ONE
          display: block;
      }
  </code></pre>
  
  <p>What is happening is that the width of <code>a"large"</code> is being overwritten by <code>a</code>. (144px not 155px)</p>
  
  <p>So, two questions:</p>
  
  <ol>
  <li>Is it possible to do what I am trying to do here-override an inherited trait?</li>
  <li>Is it possible to simply vertically align each of the 4 tab's text to be centered? (This would make up for the ugly look I'm getting from the one button being two lines, where the rest are just one)</li>
  </ol>