What is the difference between initial & default in CSS?

user_7759547 0
Viewed 431

I am reading this link and must say Mozilla is not trying to explain things! https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance

So in the screenshot below, you see the default link has a different color than initial link. Default is just element without any properties so it should inherit colour from browser's stylesheet. Cool. But the initial link should also inherit the blue color from browser default stylesheet, and instead, we have black. Please help understand.

body {
  color: green;
}

.my-class-1 a {
  color: inherit;
}

.my-class-2 a {
  color: initial;
}

.my-class-3 a {
  color: unset;
}
<ul>
  <li>Default <a href="#">link</a> color</li>
  <li class="my-class-1">Inherit the <a href="#">link</a> color</li>
  <li class="my-class-2">Reset the <a href="#">link</a> color</li>
  <li class="my-class-3">Unset the <a href="#">link</a> color</li>
</ul>

enter image description here

inheritance css
1 Answers

The initial state doesn't necessarily pull from the browser's stylesheet.

If the color property, in this instance, is not defined within the element's spec table or there is no definition for that element then it will have an initial property of nothing or in the case of a color value, rgb(0,0,0) - or black.

Anchor (<a>) tags, do not have a defined initial color property, so it will render as rgb(0,0,0);

Here you can see in the dev inspector in the computed tab:

enter image description here

Here you can see an <a> tag is not defined in the spec table.

https://html.spec.whatwg.org/multipage/rendering.html#phrasing-content-3

Here's the browser styles being set on the anchor with no color property being defined, so the browser uses it's stylesheet:

enter image description here

user_11721890
Related