CODEWITHSUNDEEP
css
Jad Joubran
Jad Joubran

Reputation: 2579

What's the difference between CSS inherit and initial?

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}

Upvotes: 39

Views: 33536

Answers (7)

Dietrich Baumgarten
Dietrich Baumgarten

Reputation: 704

  1. The specification sets a so-called initial value for each property, for the properties color and border-color for example the value black. The initial value is not called default value, the last notation does not exist in CSS.

  2. The initial value is often already overwritten by the User Agent. The initial value of display for example is inline, for block elements like p or div the UA sets the value block.

  3. Each property is either inherited or not, the color property is inherited, the border-color property is not.

  4. If the value of an inherited property is not set explicitly with a declaration, the computed value of the parent element is taken.

  5. The computed value is derived from the specified value, for example by converting the unit mm to pixels or by extending a relative URL to an absolute URL.

  6. If the value of a non-inherited property is explicitly set as inherit, the computed value of the parent element is taken, i.e. the property behaves as if it were inherited.

In a nutshell: The declaration property: initial; sets the initial value as specified in the specification, the declaration property: inherit; sets the computed value of the parent element. The following example illustrates the initial and inherit values using contextual selectors, i.e. selectors with combinators. The properties color and border-color of the p element are not specified, so the value of the color property is inherited from the outer div element and the value of the property border-color is set by default as the value of the property color for each element.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Initial vs Inherited</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    .frame{ border-style: solid; border-width: 3px; margin: 10px; }
    div{ color:blue; border-color: yellow; }
    body > div:first-child { color: red; border-color: lightgreen; }
    div:first-child { color: initial;  border-color: initial; }
    div div ~ div { color: inherit; border-color: inherit; }
  </style>
</head>

<body>
  <div class="frame">
     Color is red and border is green.
     <div class="frame">Color and border are black.</div>
     <p class="frame">Color and border are red.</p>
     <div class="frame">Color is red and border is green. </div>
   </div>
   <div class="frame">Color is blue and border is yellow.</div>
 </body>
 </html>

Upvotes: 0

Ali Adravi
Ali Adravi

Reputation: 22723

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

Upvotes: 22

hultqvist
hultqvist

Reputation: 18409

The difference is shown when the parent element have redefined the color.

Inherit: use the green color from the parent element.

Initial: use the initial(black) color.

Example:

Snippet screenshot

.green{color:green;border:1px solid #ccc;padding:6px;}
a {color:blue;}
a.inherit {color: inherit;}
a.initial {color: initial}
<div class="green">
  Green text in this &lt;div><br>
  <a href="">&lt;a href=""></a><br>
  <a href="" class="inherit">&lt;a href="" class="inherit"></a><br>
  <a href="" class="initial">&lt;a href="" class="initial"></a>
</div>

Upvotes: 21

user2251695
user2251695

Reputation: 129

color : initial is not supported by Internet Explorer.

Upvotes: -2

Joshua
Joshua

Reputation: 822

Inheritance is always from the parent element in the document tree, even when the parent element is not the containing block. The initial tag just gives the element its original value.

Upvotes: 17

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24404

inherit :

The inherit keyword specifies that a property should inherit its value from its parent element.

example

initial :

The initial keyword is used to set a CSS property to its default value.

example

Upvotes: 11

vishnu
vishnu

Reputation: 740

inherit

This keyword applies the value of the element’s parent,

whether that makes sense or not. Some CSS properties, such as color or font-family, are automatically inherited, but others, such as display or margin, aren’t. The inherit keyword should work on all CSS properties, though.

initial

This keyword applies the initial value as defined in the CSS specifications. Sometimes this initial value makes sense (float: none), sometimes it’s there for historical reasons (background-repeat: repeat), and sometimes the spec writers made an essentially random-though-somewhat-defensible choice (color: black).

More from Quirksmode site

Upvotes: 7

Related Questions