CSS: Final tips: More about precedence

  1. Final tips
  2. Watch your changes

We added the print style sheet after the general style sheet above because order in style sheets matters. Style definitions that take place last will take precedence over earlier ones. This allows us to have otherwise-conflicting styles. The last one takes effect. When not printing, only the “all” style sheet is used. When printing, the “print” style sheet is used in addition to the “all” sheet. Any conflicting styles are resolved in favor of the “print” sheet, because we put it second.

More important than order, however, is specificity. The more specific a style definition is, the higher its precedence. A style definition for “table.bookinfo” will always take precedence over one for “table”, because “table.bookinfo” is more specific than “table”.

Identifiers are more specific than classes. There can only be one of any identifier in a document; they can’t be duplicated. So identifiers (the “id” attribute of an HTML tag) take precedence over classes. Select by identifier in your style sheet by using the pound symbol (#) instead of the period.

  1. Final tips
  2. Watch your changes