Tony Stark Tony Stark - 4 years ago 102
CSS Question

Understanding how initial values work with inherited and non-inherited properties

I'm currently learning how to use the

initial
value in CSS.

However, I am very confused by the definitions given in MDN for inherited property and non-inherited properties.

So what exact is the effect of
initial
on both inherited and non-inherited properties? What are the difference between them?

enter image description here

Answer Source

Initial Value

The initial value of a property is the value assigned to the property in the W3C specification definition.

For example:

enter image description here

If the author or browser do not define this property, then CSS will refer to the initial value.


Inherited Properties

For inherited properties, the initial value is used, for the root element only, when no value is specified for the element.

Some CSS properties can inherit their value. Others can not. This behavior is also established in the property definition (see Inherited in image above).

If a property can inherit, that means the property will – in cases where the value has not been specified – take the computed value of that property from the parent.

Because a property that can inherit will always look to the parent for a value when it is not specified, there is no need for the initial value of the property to appear anywhere in the document, except on the root element.

An inheritable property anywhere in the document, no matter how deeply nested, will keep looking up one level for a value, until it reaches the root element. That's why an initial value only needs to exist on the root element.


Non-Inherited Properties

For non-inherited properties the initial value is used, for any element, when no value is specified for the element.

Properties that don't inherit will not look to their parent for guidance. Hence, the initial value is applied in all cases when it is not specified.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download