Help with css universal value control

MDN Learn
,
#1

Hello, I am Sarai and I have a doubt about the inheritance control, about the five special universal property values to control the inheritance, this is how I understood it:

  1. inherit: this value is used so that the element inherits the value of the property that its parent has assigned.

  2. initial: this value will take the initial value of the property.

  3. revert: this value has two behaviors and these depend on that if it is inherited of its father, then it will take its style, and if it is not inherited it will take the style of the style sheet of the navigator, right?

  4. unset: this value also has two behaviors which depends that if it is inherited in a natural way it will take the value of its parent, and if it is not inherited it will behave as initial.

then can you explain me why the class 3 that has as value UNSET this of green color? if it is not inherited in a natural way, thank you for your time and I would appreciate if you could explain to me

page:

code:

#2

Hi @Sarai_Atoche_Pascual

I’m not sure what exactly you mean by this statement. To clarify: If a property is “inherited” or not is defined in the specification. You can look that up on the property’s MDN article in the “Formal definition” section. For example color is inherited (https://developer.mozilla.org/en-US/docs/Web/CSS/color#formal_definition) but display is not (https://developer.mozilla.org/en-US/docs/Web/CSS/display#formal_definition).

unset will behave like inherit if the property is defined as “inherited” in the specification. Otherwise it will behave like initial.
You’re explanation about revert should be the other way round. It will set the property to the value the user-agent (browser) defines. If the user-agent doesn’t define the value it will be the same as unset. It behaves like you never defined anything about the property in your CSS file.

then can you explain me why the class 3 that has as value UNSET this of green color?

Since color is an inherited property (by specification) it will behave like inherit when using unset. Therefore green is inherited from the body.
In your example we also see the difference between unset and revert. Because the browser sets the color of links to blue, the revert property will use the browser’s value.

I hope that clears things up. :slightly_smiling_face:

Michael