Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

Applying styles to the body tag will be applied to the whole page, so

body { font-family: Verdana }

will be applied to the whole page. This could also be done with

* {font-family: Verdana} 

which would apply to all elements and so would seem to have the same effect.

I understand the principle that in the first instance the style is being applied to one tag, body for the whole page whereas in the second example the font is being applied against each individual html elements. What I am asking is what is the practical difference in doing that, what are the implications and what is a reason, situation or best practice that leads to using one over another.

One side-effect is certainly speed (+1 Rob). I am most interested in the actual reason to choose one over the other in terms of functionality.

share|improve this question
add comment

4 Answers

up vote 2 down vote accepted

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.
share|improve this answer
    
+1 I am liking this answer the most so far. –  Michael Durrant Dec 3 '12 at 0:08
add comment

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".

share|improve this answer
    
+1 Thanks. Is the difference just about tables? I would like to accept an answer that is a bit more definitive or descriptive about what other elements are treated differently, as seen with tables. Additional reasons or situations leading to one or another would be good too. –  Michael Durrant Dec 2 '12 at 15:50
    
@MichaelDurrant: No, it applies equally to a span within a div. However, it should be noted that some styles, such as margin and padding, don't cascade to child elements. For those, you should use * to apply to everything, but you rarely want to do that. –  pdr Dec 2 '12 at 16:15
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.