title: CSS inheritance and overriding it
body: <p>I'm new to CSS. Ive created a Drupal site and playing with the theme.</p>
  
  <p>I have some breadcrumb stuff that I would like to theme. If I go into Firebug and turn off the CSS properties</p>
  
  <pre><code>background
  border-color
  border-style
  </code></pre>
  
  <p>in the below code  </p>
  
  <pre><code>.breadcrumbs .inner {
      background: none repeat scroll 0 0 #EFEFEF;
      border-color: #929292 #E2E2E2 #FFFFFF;
      border-style: solid;
      border-width: 1px;
      color: #8E8E8E;
  }
  </code></pre>
  
  <p>I get the text looking exactly how I want it.</p>
  
  <p>If I now go into my style.css which is inheriting the code and post</p>
  
  <pre><code>.breadcrumbs .inner {
      border-width: 1px;
      color: #8E8E8E;
  }
  </code></pre>
  
  <p>The formatting I don't want is retained. If I specify <code>.breadcrumbs .inner</code> in the style.css does that not set it up again and override what was specified higher up the cascade?</p>
  
  <p>If that is not the case how do I stop the inheritance without changing the other style sheet?</p>
  
  <p>Thanks,</p>
  
  <p>Andrew</p>
  
  <p>Additional Info</p>
  
  <p>Here is what I have at the moment</p>
  
  <p><img src="https://i.stack.imgur.com/IUk78.png" alt="enter image description here"></p>
  
  <p>This is what I want to have
  <img src="https://i.stack.imgur.com/ORD5k.png" alt="enter image description here"></p>