CSS override or inheritance - css

Question

I have a really basic question about CSS. If there are two CSS files.
base.css contains:
.awesome-style {
height: 10px;
weight: 20px;
border: 5px;
}
child.css contains:
#import "base.css";
.awesome-style {
height: 15px;
weight: 20px;
padding: 10px;
}
When I will use the awesome-style class, what will be the applied style? My guess is that
.awesome-style {
height: 15px;
weight: 20px;
border: 5px;
padding: 10px
}
Am I right? Could somebody give me a description or good examples about how these "overrides" work? Thank you.

Answer 1

You are correct in what you believe will be the final* style applied to the element:
.awesome-style {
height: 15px;
weight: 20px;
border: 5px;
padding: 10px
}
When you do an #import, think of it as adding the CSS before what is in the CSS file you are adding it to. (Note: #import must be before any other styles in your CSS)
This is where it gets opinionated. If you have .awesome-style in both CSS files base.css and child.css, you might want to consider only adding the properties that are different than what is defined in base.css - since your browser will read them both and will apply whatever properties don't change or come last.
For instance, in your example, you could do:
base.css
.awesome-style {
height: 10px;
weight: 20px;
border: 5px;
}
child.css
#import base.css
.awesome-style {
height: 15px;
padding: 10px
}
This is because only the height and padding are changing. This is easier to see when you consider how the CSS file will look to the browser:
.awesome-style {
/* browser reads this, but it will get changed */
height: 10px;
/* this stays the same, but will still get 'overwritten' since it's defined again in the next rule */
weight: 20px;
/* this doesn't get defined again, so the browser will use this */
border: 5px;
}
.awesome-style {
/* height changed */
height: 15px;
/* weight stayed the same, but is still read from this rule because it comes after the previous rule */
weight: 20px;
/* padding wasn't defined prior, so it will use this rule */
padding: 10px;
}
And then this really becomes a question about CSS specificity
*final as in your current question - another rule may override what you have