CODEWITHSUNDEEP
htmlcssinheritance
Mesmer
Mesmer

Reputation: 59

overriding <html> element style

I am playing with some basic html and css, and I am confused by one thing: According to many resources html element is the root element, but I can change its style values like any other element. According to this https://www.w3schools.com/cssref/css_units.asp % relative length is relative to parent element, but when I set width property of html to 50% it seems that it's not working, because the whole background remains blue, then it works, because children body when set to 100% width takes only 50% of screen, then I realize that it is working and not working at the same time, what am I missing?

html {
    background: blue;
    width: 50%;
    height: 100%;
    overflow: hidden;
}
body {
    background: yellow;
    width: 100%;
    height: 100%;
}

Upvotes: 0

Views: 51

Answers (1)

Quentin
Quentin

Reputation: 943559

See the specification:

The background of the root element becomes the background of the canvas and covers the entire canvas

So even though the html element is not the full width of the canvas, the whole canvas takes on that background colour.

Upvotes: 1

Related Questions