Learn Responsive Web Design by Building a Piano - Step 10 - Why use HTML for box-sizing declaration when you can use *?

Tell us what’s happening:
So I know the answer is:

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

but what makes this code preferrable to simply putting this code instead:

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

Why is the html part necessary?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Piano</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./styles.css">
  </head>
  

     <!-- Most of the html part because it is not important to my question -->


</html>
/* file: styles.css */
html {
  box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}

So in summary, I know the answer but I don’t know why?

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36 Edg/105.0.1343.53

Challenge: Learn Responsive Web Design by Building a Piano - Step 10

Link to the challenge:

I would at the moment follow the lesson, There is a reason for it. I do know that if you use* tag, it overrides all.

I have a doubt, is there any difference between html selector and * selector?
I thought they both serve the same context.Please correct me If I am wrong

I have not been online in awhile.
did you finish the problem or have someone already help?