DONT ADD ANYTHING HERE!

CSS provides five special universal property values for controlling inheritance. Every CSS property accepts these values
  1. inherit
    1. Sets the property value applied to a selected element to be the same as that of its parent element
    2. Effectively, this "turns on inheritance"
    3. The inherited value of a property on an element is the computed value of the property on the element's parent element
  2. initial
    1. Sets the property value to the initial value of that property
    2. The initial value of a CSS property is its default value, as listed in its definition table in the specification
  3. revert
    The behavior depends on the cascade origin to which the declaration belongs
    1. user-agent origin
      equivalent to unset
    2. user origin
      1. Rolls back the cascaded value to the user-agent level
      2. The specified value is calculated as if no author-origin or user-origin rules were specified for this property on this element
    3. author origin
      1. Rolls back the cascaded value to the user level
      2. The specified value is calculated as if no author-origin rules were specified for this property on this element
    4. see W3C
  4. revert-layer
    1. Resets the property value applied to a selected element to the value established in a previous cascade layer.
  5. unset
    Resets the property to its natural value, which means that
    1. If the property is naturally inherited it acts like inherit
    2. Otherwise, it acts like initial

Notes

  1. Inherited property examples
    1. color
    2. background-color
    3. font-family
    4. mnemonic: bccff are inherited
  2. Not inherited property examples
    1. width
    2. margin
    3. padding
    4. border
  3. cascade-layer (@layer)
    1. Rules within a cascade layer cascade together
    2. Any styles not in a layer are gathered together and placed into a single anonymous layer that comes after all the declared layers, named and anonymous.
    3. Any styles declared outside of a layer will override styles declared in a layer, regardless of specificity
  4. cascade-origin
    1. Each style rule has a cascade origin, which determines where it enters the cascade
    2. CSS defines three core origins
      1. Author Origin
      2. User Origin
      3. User-Agent Origin
  5. all
    1. The CSS shorthand property all can be used to apply one of the inheritance values to (almost) all properties at once

Example (default)

tomgdow
<a href="https://tomgdoww.com" id="mydefault">tomgdow</a>
The default link color (NOT background-color) is blue, which comes from the browser

Example (inherit)

//CSS
.divcontent {color: lime;}

#myinherit {color: inherit;}

// HTML 

<div class="divcontent">
    <a href="https://tomgdoww.com" id="myinherit">tomgdow</a>
</div>
The link color (NOT background-color) is inherited from the parent class

Example (initial)

//CSS
.divcontent {color: lime;}

#myinitial{color: initial;}

// HTML 

<div class="divcontent">
    <a href="https://tomgdoww.com" id="myinitial">tomgdow</a>
</div>
  1. The link color (NOT background-color) is initial value of the CSS color property
  2. In the case of color, the initial value is canvasText
  3. canvasText is a system color keyword, and maps to the existing WindowText system color keyword

Example (revert)

Author Origin

//CSS
.divcontent {color: lime;}

#myrevert {color: revert;}

// HTML 

<div class="divcontent">
    <a href="https://tomgdoww.com" id="myrevert">tomgdow</a>
</div>
As color is calculated as if no author-origin rules were specified, the link color appears blue

User Origin

//CSS (USER stylesheet)
#myrevert {color: red;}
Inclusion of the above CSS rule in the user stylesheet, but othewise with identical code to author origin above, results in a red link color

Example (revert-layer)

//CSS

@layer flayer, llayer;
@layer llayer {
    .myrevertLayer {color: revert-layer;}
}
@layer flayer {
    .myrevertLayer {color: magenta;}
}

.myrevertlayer {color: revert-layer;}

// HTML 

<div class="divcontent">

    <a href = "https://tomgdoww.com" 
          id = "myrevertLayer" 
          class = "myrevertLayer">
    tomgdow</a>

</div>
The revert-layer value causes the CSS rule from the previous layer (flayer) to be applied

Example (unset)

//CSS
.divcontent {color: lime;}

#myunset {color: unset;}

// HTML 
 <div class="divcontent">
    <a href="https://tomgdoww.com" id="myunset">tomgdow</a>
 </div>
As color is naturally inherited, unset acts like inherit

References