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

According to your link:

unset is a CSS value that's the same as "inherit" if a property is inherited or "initial" if a property is not inherited

Here is an example:

pre {
  color: #f00;
}
.initial {
  color: initial;
}
.unset {
  color: unset;
}

  This text is red because it is inherited.
  [color: initial]: This text is the initial color (black, the browser default).
  [color: unset]: This text is red because it is unset (which means that it is the same as inherited).

A scenario where the difference matter is if you are trying to override some CSS in your stylesheet, but you would prefer the value is inherited rather than set back to the browser default.

For instance:

pre {
  color: #00f;
}
span {
  color: #f00;
}
.unset {
  color: unset;
}
.initial {
  color: initial;
}

  Text in this 'pre' element is blue.
  The span elements are red, but we want to override this.
  [color: unset]: This span's color is unset (blue, because it is inherited from the pre).
  [color: initial]: This span's color is initial (black, the browser default).