CSS Inheritance and Overriding

Question

I am new to CSS. Ive created the Drupal website and played with the theme.

I have something that I would like to topic. If I log into Firebug and disable CSS properties

background border-color border-style 

in the code below

 .breadcrumbs .inner { background: none repeat scroll 0 0 #EFEFEF; border-color: #929292 #E2E2E2 #FFFFFF; border-style: solid; border-width: 1px; color: #8E8E8E; } 

I get text that looks exactly how I want it.

If I now go into my .css style, which inherits the code and publishes

 .breadcrumbs .inner { border-width: 1px; color: #8E8E8E; } 

Formatting that I do not want is saved. If I specify .breadcrumbs .inner in style.css, it will not install it again and override what was mentioned above the cascade?

If this is not the case, how to stop inheritance without changing another stylesheet?

Thanks,

Andrew

Additional Information

Here is what I have at the moment

This is what I want to have

Answer 1

You redefine CSS, which does not replace 3 styles that you want to change, so the original ones are supported. What you most likely want to do is make your .css style as follows:

 .breadcrumbs .inner { background: none; border-color: transparent; border-style: none; } 

Answer 2

If you specify CSS styles for the same classes twice, the resulting style will be the union of the attributes defined in both classes. To remove previous styles, you must override the attributes.

Answer 3

If, for example, you have these css attached to your html document

 <link rel="stylesheet" type="text/css" href="css/default.css"> <link rel="stylesheet" type="text/css" href="css/posts.css"> 

if you have the same class that says .color defined in default.css and posts.css files, you can assume that this last css file will be used, but you can ignore it if you write it like this:

 // default.css .color { color: blue !important; } // posts.css .color { color: green; } // In this example the colour would be blue. 

Using! important for inherited style makes the inherited style use, if you want to override the inherited style, then you can just add! important for post.css

 // default.css .color { color: blue !important; } // posts.css .color { color: green !important; } // In this example the colour would be green. 

Now both of them are considered important, and the latter will be used.