Hi all!
If I want to set styles for the entire html-document, is it besser to define them in css for the html-Element, or for the *-selector? For example general font-size or color for all typo.
html{font-family: arial;} or *{font-family: arial;} . Is there a difference? Thank you!
I can’t say the difference, but I think it would be better to create a Class, and apply that class to the header/body/footer elements, it should be easier to manage just in case you want to change something, or apply something specific to other elements later (even though the * selector would be ignored if a more specific one was applied to the same element).
For the font family, I would suggest you use the body selector. Although, that does mean you have to explicitly inherit it in a few places, for example, the button element will not inherit the font family from the body.
The * selector is pretty “brute force” and having a lot of styles set on all elements even when it isn’t needed is just unnecessary. The selector is not as slow as it used to be but it should still not be misused. It does depend on the size of the site/page (i.e. total element count).
1 Like
Thank you all for your thoughts! Was not aware a * has to be rendered to every tag, might be slow. Indeed I saw programming samples with *. Going to avoid it. 
You don’t have to avoid it, just use it sparingly and for the right things. For setting box-sizing it is perfectly fine to use. It can also be used for doing some CSS resets, like removing all margins.
As I said, the actual selector isn’t necessarily slow, but there are styles where it doesn’t really make sense to use it. For example, if a style is already inherited from the body by most elements, use the body instead.
I will say it does have to match on everything and if a page has hundreds of thousands of elements I’m fairly sure it can still have an impact. I also don’t consider using the * selector “correctly” to be a premature optimization, it is more about common sense use of it.
1 Like
Thank you for sharing your thoughts! I heard about using it for removing margins in general and defining a box-model, so I keep this in mind. have a nice weekend!
Hihi!
Stumbled across related phenomenon. Posted it here: Learn Basic CSS by Building a piano - Step 10 -> inheritance
Basically: in project 10 we have to assign border-box to html-selector and it is not inherited. You have to work around this by assigning inheritance to * , which is double work I guess…
Why is box-sizing not inherited to rest of page when assigned to html selector? Many other features like color do.
Thank you!
You would have to ask the people writing the specs how they decide which properties should be inherited.
But just as with margin and other such properties, inheriting box-sizing is probably not a good idea. With a property like color, it makes sense that it is inherited. But with other properties, it doesn’t make sense and might cause unexpected results.
1 Like
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.