As anyone who codes CSS knows, the color property in CSS defines the color of the text in a specified element. I’ve often wondered why this property was not named text-color or something similar.

A comment that was posted today on one of my older articles by someone named Stu Goymer actually instigated my research into this, but he raised an interesting point: Why doesn’t the font shorthand property allow the color to be defined?

Well, according to the spec, here’s what the color property is supposed to do:

This property describes the foreground color of an element’s text content. In addition it is used to provide a potential indirect value … for any other properties that accept color values.

So, the color property is not just for text content, but for anything in the foreground that takes a color value. To demonstrate something else that the color property affects, here’s a bit of CSS, and an accompanying live example of what that code would display:

.element { background: #fff; width: 100px; height: 100px; color: red; border: solid 2px; }

Here’s what the above code produces:

The color of the border is not defined, but the “red” value from the color property is used for the border color, because the border of an element is considered part of the foreground. This works the same in every browser. Of course, if the border property included a color value (which is almost always the case), then that would override the previously-defined color.