Learn Responsive Web Design by Building a Piano

HTML-CSS
1

So, I’m going through the lesson and they’ve introduced a different way of setting box-sizing:

html {
  box-sizing: border-box;
}

*, ::before, ::after {
  box-sizing: inherit;
}

My question is: Why not only use the universal selector and pseudo selectors to set box-sizing to border-box? Why use an html selector when using a universal selector would lead to all the elements having border-box so there won’t be any need of mentioning the “inherit” thing? And if we are using the html selector then what’s the need for universal selector aren’t they doing the same thing?

2

So, yeah, I’m too newbie to fully understand this, but I did my own research and here’s how I understand it.

  1. Using the html selector, applies the style properties to the html element. Most of the elements inside the html will inherit the styling, apart from some elements with their own defaults like fonts in input elements, etc. So basically, this does not mess up with the inheritance and defaults of the elements within the html. (This part is where I need more research)
  2. With the universal selector *, any styling you apply will apply to each element basically overriding any defaults.
  3. In most cases I’ve seen, universal selector is only used to apply only styles that will sort of prep your website and make a blank state, such as setting box-sizing, margin, and padding as different browsers will have different defaults for how to apply this, so setting them up with a universal selector preps the rest of your code to work as intended for all browsers. (This one is very clear however, as applying a rule to ALL elements using the universal selector, means a slower respond from the browser.)

So, to summarize, this part of the lesson I GUESS is trying to teach us less on box-sizing, but more on inheritance when it comes to applying CSS rules.

But don’t take my word for it, do your own research, and if you do find a much clearer understanding, share it with me. Thank you