What is the difference between the initial and unset values?

Question

A simple example:

HTML

 
    this text is red 
     
       this text is in the ini         


        

Answer 1

I would like to quote the official CSS|MDN documentation for future reference when looking into the differences between each:

INITIAL

The initial CSS keyword applies the initial value of a property to an element. It is allowed on every CSS property and causes the element for which it is specified to use the initial value of the property.

Therefore according to your example:

em {
    color:initial;
    /* color:unset; */
}

 
    this text is red 
     
       this text is in the initial color (e.g. black)
    
    this is red again

Note how the initial property retains the initial the color property of the element.

UNSET

The unset CSS keyword is the combination of the initial and inherit keywords. Like these two other CSS-wide keywords, it can be applied to any CSS property, including the CSS shorthand all. This keyword resets the property to its inherited value if it inherits from its parent or to its initial value if not. In other words, it behaves like the inherit keyword in the first case and like the initial keyword in the second case.

Therefore according to your example:

em {
  /* color:initial; */
  color:unset;
}

 
  this text is red 
   
    this text's color has been unset (e.g. red)
  
  this is red again

Note how the unset property simply resets the color property of the element.

IN CONCLUSION

The idea is quite straight forward, but in practice I would advice caution when dealing with cross browser compatibility for both CSS properties... that is as of today.