Why does `color:initial` for an anchor element set its color to black instead of blue?

Question

According to MDN - Cascade and inheritance the initial value

Sets the property value applied to a selected element to be the same as the value set for that property on that element in the browser's default style sheet

The default color for an anchor element in all major browsers is blue. For example, Chrome's default style sheet defines the following style for an anchor element:

a:-webkit-any-link {
    color: -webkit-link;
    text-decoration: underline;
    cursor: pointer;
}

where -webkit-link resolves to blue.

Given this, I'm expecting the text of an anchor element to be blue when using color: initial. But instead it is black. Why?

After some investigation I found that MDN contradicts itself here by writing

The initial value should not be confused with the value specified by the browser's style sheet.

I am confused. Which statement is true?

If the latter is true, where can I find an element's initial value for different browsers? And why should initial values be different than specified in the browser's style sheet?

Answer 1

Good question! I think you found a mistake on MDN, which I've corrected. Let's try to explain what's really going on.

According to the spec, a value of initial refers to the "initial value" of that property.

If the cascaded value of a property is the initial keyword, the property’s specified value is its initial value.

According to the spec the initial value of a property is a pre-defined default.

Each property has an initial value, defined in the property’s definition table. If the property is not an inherited property, and the cascade does not result in a value, then the specified value of the property is its initial value.

So each property has a default value, called "initial value", mandated by the spec. The initial value is not up to the browser ^*. The spec lists the initial value of a property in its definition table, see property index. An older version of the spec maintained a separate list, see property table.

For example, margin has an initial value of 0. Or color has an initial value of black ^*.

If the value of the property is not set in the cascade (and by inheritance), then it takes on this initial value. However, it is crucial to understand, that if you do not set the property it doesn't mean the cascade does not result in a value.

The browser has a style sheet which it applies to each document. This style sheet has lower priority than your style sheet, so it only applies if you don't overwrite it. The value it sets for a property can be anything, just like the values in your style sheet. The browser style sheet is just like a style sheet of yours, but one that you didn't author, never saw, and was just applied magically, invisible to you. To find the browser style sheet, see How can I locate the default style sheet for a browser?

If you don't add specify a value for a property, but the browser style sheet does, then to you it seems like that is the initial value, when in fact it is not! This is indeed very confusing! It makes the values in the browser style sheet seem like the initial values when they are not. And this subtle difference can be noticed when using the value initial, which sets the property back to the initial value. You can think of it deleting the value in the browser style sheet.

I think it's questionable at this point if the idea of browsers to include a browser style sheet was a good idea. In the early days it apparently made creating web pages simpler, because the author didn't need to do any styles. But nowadays authors customize the style of their web pages and there is just no sensible default style anymore. Also authors don't want their documents to look different in different browsers. An invisible default style by the browser is just another hidden source of bugs.

In the case of the anchor element, the browser style sheet sets the color to blue (if it has an href attribute). This makes it seem as if blue was the initial value of the color property for anchor elements. But in fact, the initial value of the color property is black, which you see when you set the value initial. It's just that the browser style sheet styles the anchor element "for you" without you noticing.

Note, that the initial value is a characteristic of a property. It doesn't care about elements. It can't be different for one element or another. The browser style sheet may choose to style a property only for certain elements or certain conditions, just like your own style sheet can. This can make the initial value of a property seem different for different elements or conditions, when in fact it is not.

For example, the browser style sheet colors the anchor element blue (if it has an href attribute) but not the paragraph element. A property that has different values for different elements is an indicator that the browser style sheet is doing its magic.

---

¹ Some properties (including color) state

Initial: depends on user agent

This does however not imply that the user agent style sheet is used! Instead the initial value

[..] depends on things like the preferences settings [of the user agent]

(see CSS: The Definitive Guide: Visual Presentation for the Web)

For example, Firefox allows to specify the initial value for properties like color, background-color, font-family, font-size, etc. in the settings.

Though, confusingly, the same settings allow to set properties for the browser style sheet as well, e.g. link color. This can be inferred because these values only apply to certain elements while initial values need to apply to every element for which the property exists.