Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What's the difference between CSS inherit and initial?

Tags:

css

What exactly is the difference between inherit and initial in terms of CSS? For me they always worked the same, for example:

a.no-style{color: inherit} 

will do the same as

a.no-style{color: initial} 
like image 951
Jad Joubran Avatar asked Apr 15 '15 21:04

Jad Joubran


People also ask

What does inherit CSS mean?

The inherit CSS keyword causes the element to take the computed value of the property from its parent element. It can be applied to any CSS property, including the CSS shorthand property all . For inherited properties, this reinforces the default behavior, and is only needed to override another rule.

What is the use of initial in CSS?

The initial keyword is used to set a CSS property to its default value. The initial keyword can be used for any CSS property, and on any HTML element.

What is the opposite of Inherit CSS?

If you don't need to use inheritance, you use the value initial . That given CSS property sets the default value given in the specification.

What is initial value CSS?

The initial value of a CSS property is its default value, as listed in its definition table in the specification. The usage of the initial value depends on whether a property is inherited or not: For inherited properties, the initial value is used on the root element only, as long as no specified value is supplied.


1 Answers

The initial value given in the summary of the definition of each CSS property has different meaning for inherited and non-inherited properties.

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

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

An initial keyword is being added in CSS3 to allow authors to explicitly specify this initial value.

The inherit keyword means use whatever value is assigned to my parent.

Source : https://developer.mozilla.org/en-US/docs/Web/CSS/initial_value

like image 186
Ali Adravi Avatar answered Oct 09 '22 15:10

Ali Adravi