CSS Query: "html, body { color: #434242; font-family..."

I’ve found CSS file entry as below

html, body { color: #434242; font-family: 'Open Sans', sans-serif !important; height: 100%; }

but didn’t get why html. is used here ?

Thanks in advance.

I think it’s for inheritance purposes. This way, all elements in the HTML document by default have a set foreground color, font family, and height, unless declared otherwise for each element.

I tried googling for this but didn’t find any reference. Can you please share in case you are aware of any ?

You might find this article useful. It’s somewhat long, but the first four sections address inheritance and the best way to use it to write less CSS.

1 Like

I think the grouping is just for the height property, everything else should work just fine on the body. It’s just a bit of “lazy” selector usage I’d say.

html, body { 
  height: 100%;
}

body { 
  color: #434242; 
  font-family: 'Open Sans', sans-serif !important;
}
1 Like