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

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

//CSS
.divcontent {color: lime;}

#myinherit {color: inherit;}

// HTML 

<div class="divcontent">
    <a href="https://tomgdoww.com" id="myinherit">tomgdow</a>
</div>

//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

Author Origin

//CSS
.divcontent {color: lime;}

#myrevert {color: revert;}

// HTML 

<div class="divcontent">
    <a href="https://tomgdoww.com" id="myrevert">tomgdow</a>
</div>

User Origin

//CSS (USER stylesheet)
#myrevert {color: red;}

//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>

//CSS
.divcontent {color: lime;}

#myunset {color: unset;}

// HTML 
 <div class="divcontent">
    <a href="https://tomgdoww.com" id="myunset">tomgdow</a>
 </div>