CSS

===Inheritance===
Inheritance is a key feature in CSS; it relies on the ancestor-descendant relationship to operate. Inheritance is the mechanism by which properties are applied not only to a specified element but also to its descendants.<ref name="Cascading"/> Inheritance relies on the document tree, which is the hierarchy of [[XHTML]] elements in a page based on nesting. Descendant elements may inherit CSS property values from any ancestor element enclosing them.
In general, descendant elements inherit text-related properties, but their box-related properties are not inherited. Properties that can be inherited are color, font, letter spacing, line-height, list-style, text-align, text-indent, text-transform, visibility, white-space, and word-spacing. Properties that cannot be inherited are background, border, display, float and clear, height, and width, margin, min- and max-height and -width, outline, overflow, padding, position, text-decoration, vertical-align, and z-index.

Inheritance can be used to avoid declaring certain properties over and over again in a style sheet, allowing for shorter CSS.

Inheritance in CSS is not the same as [[Class-based programming#Inheritance|inheritance in class-based programming languages]], where it is possible to define class B as "like class A, but with modifications".<ref>{{Cite web|title = Can a CSS class inherit one or more other classes?|url = https://stackoverflow.com/questions/1065435/can-a-css-class-inherit-one-or-more-other-classes|website = StackOverflow|access-date = 2017-09-10|archive-url = https://web.archive.org/web/20171014054727/https://stackoverflow.com/questions/1065435/can-a-css-class-inherit-one-or-more-other-classes|archive-date = 2017-10-14|url-status = live}}</ref> With CSS, it is possible to style an ''element'' with "class A, but with modifications". However, it is not possible to define a CSS ''class'' B like that, which could then be used to style multiple elements without having to repeat the modifications.

====Example====
Given the following style sheet:
<syntaxhighlight lang="css">
p {
   color: pink;
}
</syntaxhighlight>
Suppose there is a p element with an emphasizing element (&lt;em&gt;) inside:
<syntaxhighlight lang="html">
<p>
   This is to <em>illustrate</em> inheritance
</p>
</syntaxhighlight>
If no color is assigned to the em element, the emphasized word "illustrate" inherits the color of the parent element, p. The style sheet p has the color pink, hence, the em element is likewise pink:

<div class="html-box" style="min-width: 160pt; height: 80pt; background-color: white; border: 2pt solid #303030; padding: 5px; user-select: none;>
  <p style="color: pink;">This is to <em>illustrate</em> inheritance</p>

</div>