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

299
February 02, 2017, at 08:03 AM

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?

Answer 1

Initial Value

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

For example:

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.

Answer 2

I'll try to clear this a litlle with my average english:

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

In the way i understand this, is that initial for any rules applied to HTML, are the default value for HTML and that will be inherited by children, unless reset at any level of your HTML tree .

Each browsers uses almost the same default style sheet (html background is transparent(white from the browser window), color is black, h1 is a block with vertical margins and so on ...)

If you set color:green to HTML and set color:initial to body, you will be back to black (the default style sheet).

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

That's what happens to HTML or any tags with no parent from which they can inherit a value that has been reset .

initial are the default value of the default style sheet: see for some understanding https://www.w3.org/TR/CSS2/sample.html .

The way it is written or describe is indeed not clear, both have in my understanding the same meaning with different words

one example that can confuse but also help to understang/test this value :

p {font-size:initial} and p {font-size:1rem} might not be the same,

if you did html{font-size:2em} .

@English readers, do not hesitate to correct my average writing

Answer 3

Nothing. If you explicitly assign initial as the specified value of a property, then the computed value of the property for any element to which it is assigned is the initial value of that property regardless of whether it is an inherited property or not.

For example, the computed value of font-style, when its specified value is initial, is normal even if its parent font-style is something else, despite the fact that font-style is an inherited property. See https://jsfiddle.net/s3dzh6kw/

When the cascade does not assign a specified value of a property for an element, then the specified value of the property depends on whether the property is inherited or not.

READ ALSO
Firebase: href relative links fail

Firebase: href relative links fail

Is it just me, or with Firebase Hosting, do your relative href links fail for files placed in a subdirectory? For example I have a Folder structure like below but <link rel="stylesheet" href="stylecss" /> in the highlighted index

372
CSS ordered list - style the number, when li contains multiple lines, maintaining indentation

CSS ordered list - style the number, when li contains multiple lines, maintaining indentation

Variants of this question have been asked and answered, but I can't find an answer to this specific question

378
Image pop-up from within table in WordPress

Image pop-up from within table in WordPress

I have a table in a WordPress pageIn one column of the table, I have a small image

333
How to change the color on a progress bar

How to change the color on a progress bar

How do you change the color on a progress bar? I don't know what the played part of the bar is called so I'm attaching a photo with an easier question

329