Functional differences between these two choices of CSS selector…(my take)

body

• Applies style properties to body element.
• Elements within body may inherit the property values. Some properties default to ‘inherit’.
• Style declarations that match an element within body can override the inherited style.

The Universal Selector * (all elements)

• Applies style properties to all individual elements.
• Replaces inherited style properties, and default ‘initial values’. Blocks inheritance.
• Other, more specific css selectors that match an element will replace the style properties applied by *.

Suggestions

1. Use body for style properties that default to inherit, such as font, color, in order to provide a sensible default value for elements, reducing the need to explicitly code for every case, and preserving the ability for elements contained at lower levels below body to inherit from their parents.
2. Probably better not to use the Universal Selector * in this case. It interrupts inheritance between other elements within body, and may force you to write more css rules to compensate. It can be a factor in slowing rendering of pages. This depends on the size and content of the page and how many css rules there are.

Try something like this

body { font-family: Verdana }
table { font-family: Arial }

against

* { font-family: Verdana }
table { font-family: Arial }

And see which styles are applied to the cells of the table.

There is a difference between “applied to the whole document” and “applied to every element of the document” when you’re dealing with cascading stylesheets.

Applying a cascading style to the body applies it to all tags within body until a tag overwrites it. Then the overwritten style is applied to all tags within that one.

However, there are some styles that don’t cascade, such as margin and padding (usually where it makes no sense to). Those can only be applied to specific tags and that’s where a wildcard can come in useful (albeit rarely).

Most non-cascading styles also have a value of inherit (eg. margin: inherit), which means “take the parent tag’s values”.

I’ve forgotten the complete details but, with the * selector, performance is slowed down as each and every element gets evaluated as the browser parses the CSS and applies the style. iirc, setting the font, in this case, to just the parent makes one reference for each element and additional work is not needed.

There are some other issues, too, but, again, I don’t recall them all and have not used * in years.

As others have mentioned, body { font-family: Verdana } will select the font Verdena to only those elements which inherit the font-style property from its parents such that all of its parents too inherit the property eventualy form the body element, and, * {font-family: Verdana} will select the font Verdena to all the elements. I’d like to illustrate the difference with an example:

Using body selector:

body 
{ 
font-family: courier;
}

<p> This is paragraph with courier font </p>
<form>
<label for="X">Please type inside me: </label><input type="text" naem="X" value="Not Courier :("> 
</form>

Using universal selelctor *:

* 
{ 
font-family: courier;
}

<p> This is paragraph with courier font </p>
<form>
<label for="X">Please type inside me: </label><input type="text" naem="X" value="Courier :)"> 
</form>

Use the css and html codes of the examples you’ll recognize that <input> element doesn’t inherit the font-style at all and hence whatever you type into the form gets the default font-style of user-agent style sheet. In the second example the universal selector* explicitly sets font-style for every element including the input element.

The general guideline for good CSS design is to be as specific as possible, but not more.

So, in your example, applying the style to the body element would be as specific as possible and certainly more specific than the ‘*’ selector.