Universal selector and body selector rules

Hello everyone,

I got a question. I realize that with the universal selector we simply select every single element on a page e.g.:

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

and with the body selector we will allow inheritance of things such as the font family, etc. e.g.:

body {
line-height; 1.6;
font-weight: 400;
font-family: 'Open Sans, san-serif;
color: #555;
}

However, can you also use the body selector like this?

body {
font-family: ‘Open Sans’, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}

Is it correct or wrong or it doesn’t matter? Notice how I added the margin, padding, and the box-sizing. Would love to have your input on this. Cheers

The answer is “it depends” (on the property).

Some properties are inherited, some aren’t. Imagine that removing margin and padding from the body would remove margin and padding from all elements. Or if giving your body a background-color of black or a border of 1px solid red would be inherited by all children. That would be a little annoying.

I’d have to google myself which properties are inherited by children and which aren’t, but a good rule of thumb is that whenever it comes to formatting text (font-family, font-size, color, line-height etc), those CSS rules will be inherited by child elements.

1 Like

Hi @ME20!

The both <body> codes will work! The point is to understand the CSS Override’s rules.

Basic CSS: Prioritize One Style Over AnotherPassed

When I code, I usually like to put the body CSS code at the very beginning, and set on it the attributes that are relevant to the entire page.
And in the rest of the code, your others attributes, that can be overwritten the body ones or not.

Neither of the three properties you added to the body are inherited. So no, you can’t just set them on the body, unless you want to specify the properties with the inherit value for each and every selector where you want the properties to be inherited.

body{
  margin: 0;
}

h2 {
  margin: inherit;
}

Hello to all of you and thank you for the awesome input.


* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

is the correct way to do it.

I gave it a try myself and it worked fine. I learned that each browser has a style sheet of its own. The browser’s style sheet adds padding and margin to the elements. By adding the above code, the browser’s style sheet will be overridden and we’ll be able to add our own margin and padding to the elements (which as we can imagine is time-consuming but allows us a lot of flexibility).

By adding the box-sizing: border-box; I realized that the padding and the border of an element will be on the inside of the box and not on the outside. In this way, the boxes will not grow by size when we add padding or a border which also helps prevent the dreaded horizontal scrolling when viewing the page in the browser.

You are missing the selector?

BTW, when you add code to the forum you have to format it. You can use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Thanks for bringing this to my attention. Yes, I’ll make the correction. I accidently remove it.