0

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.

istvan.kolumban
  • 15
  • 2
  • 1
    It's in the name, css stand for Cascading style sheet, Cascading as in going down, the last style defined will be the one applied, except the cases where `!important` is used, the files doesn't matter, what matters is the order they're added to the document – Rainbow May 31 '21 at 10:42
  • Thank you for your answer @ZohirSalak. Just to be clear, in my example this means that the border: 5px; will not be applied? – istvan.kolumban May 31 '21 at 11:41
  • It will because nothing is overriding afterwards, imagine a waterfall, Everything stacks in the bottom and the last one is applied, Your guess is correct as long as there's no exceptions before it, or other selectors for the same element that is styled with `.awesome-style` – Rainbow May 31 '21 at 12:18

1 Answers1

0

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

disinfor
  • 10,865
  • 2
  • 33
  • 44