CSS Cheat Sheet: Inheritance, Cascade, Specificity

By: Zoe Gillenwater

Page 1 of 2

Set for printing

Next

Even seasoned CSS developers need a quick refresher course in CSS concepts and techniques from time to time. This CSS Cheat Sheet is designed for just that need. Use it as a reference for topics that you've already learned about in-depth but need a few reminders on. If you're still a beginner to CSS, use it to learn the nuts and bolts of working with CSS, then use our other articles, listed at the end of this one, to extend your learning and practice your new skills.

This Cheat Sheet reviews how the fundamental CSS concepts of inheritance, cascading and specificity work.

Inheritance

Inheritance is the process by which the value of certain CSS properties applied to an element get passed down to all elements nested within it. Inheritance relies on the document tree, which is the hierarchy of (X)HTML elements in a page based on nesting. Descendant elements may inherit CSS property values from any ancestor elements enclosing them.

In general, text-related properties are inherited by descendant elements, and box-related properties are not inherited. The complete list of CSS 2.1 properties indicating which inherit and which do not is found in the W3C CSS 2.1 specification. Here is a summary of that information:

Properties that inherit:

  • color
  • font (and related properties)
  • letter-spacing
  • line-height
  • list-style (and related properties)
  • text-align
  • text-indent
  • text-transform
  • visibility
  • white-space
  • word-spacing

Properties that don't inherit:

  • background (and related properties)
  • border (and related properties)
  • display
  • float and clear
  • height and width
  • margin (and related properties)
  • min- and max-height and -width
  • outline
  • overflow
  • padding (and related properties)
  • position (and related properties)
  • text-decoration
  • vertical-align
  • z-index

Inheritance prevents certain properties from having to be declared over and over again in a style sheet, allowing the developers to write less CSS, the users to view faster-loading pages, and the clients to save money on bandwidth and development costs.

Page 1 of 2 1 2 Next


download
Download Support Files


Keywords
CSS, cascading style sheets, styles, styling, inheritance, document tree, descendants, descendents, ancestors, nested elements, nesting, cascade, specificity, user styles, author styles, browser styles, overriding, external style sheets, embedded styles, inline styles, precedence, weight, origin, order, !important, selectors