Page 1 of 2 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 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:
Properties that don't inherit:
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.
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
