CodeinWP CodeinWP

Here’s Something Interesting About the CSS Color Property

CSS ColorAs 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.

For the life of me I can’t think of anything else (besides borders and text) that would be affected by the color property. I thought it might affect elements created with scripting on a canvas element, but that doesn’t seem to be the case.

Update (Jan 27/2011): Scott, in the comments, keenly points out that the bullets, or list markers, of an unordered list will receive the value of the color property. SitePoint’s reference confirms this, clarifying further the color value for any individual list marker will equal the computed color of that list item (which could be inherited from the <ul> element).
Update (Jan 28/2011): Another foreground element that is affected by the color property is the alt text that’s added to an image. If images are disabled or an image is not yet loaded, the alt text that displays in the image’s placeholder will have the computed color value for the image element (so the color could be inherited, or even directly applied to images). Thanks to Andrea Fercia for pointing this out.
Update (Jan 29/2011): Another element that seems to be affected by the color property is the <hr> element. But, unless a border is defined in the CSS, it seems to only work in Firefox, Opera, and IE6. Chrome, Safari, IE8/9 do not change the color of the <hr> border unless you specify a solid border. Thanks to comment from Nod.

23 Responses

  1. Scott says:

    The color property affects the color of horizontal lines in some browsers. I don’t know which ones – I just have an ancient CSS snippet for hr that sets color, border-color and height which at the time covered all browsers.

    I guess the idea for color was future-proofing in case some other form of non-textual content is ever used, for example symbols or icons that are not image- or Unicode- or font-based. Actually, list bullet points should fall into this category – if you set a color on a list or list item, the bullet point will be said color.

  2. Sandeep says:

    interesting. I always thought color is just for text color. Thanks for sharing.

  3. Javier says:

    Just blew my mind. I had always wondered the same thing.

    I agree, though, that font should allow color to be defined. It would just be that much more streamlined.

    • But, as mentioned in the post, that goes against the purpose of the color property. Technically speaking, it’s not a typographical property, so it doesn’t really belong there.

      Not to mention that the font shorthand property is not very intuitive and, in my opinion, should never be used! :)

  4. steff says:

    while is used the color property pretty hard in my works, i never question myself why isn’t there a substitute for that.. i think they let the color attribute like that for browser compatibility also! thanks for clearing that out for us!

  5. Dathan says:

    Interesting info. Thanks!

  6. Jim S says:

    Using color for an unordered list bullet is a nice piece of advice. Thanks for sharing.

  7. Oh.. my god.
    its amazing and interesting too. Thanx Louis for in-depth.

  8. Stephan says:

    Mind=blown. Thanks though, now I finlly found out how to give bullets a different color than the list items themselves :P

  9. All of this is inconsequential as it should be named colour anyway ;-)

  10. Johan Brook says:

    You should check out the CSS keyword ‘currentcolor’, which lets you use the current color value anywhere else in the CSS (gradients, shadows et al): http://jnbrk.se/hTgDyD.

    Works in Firefox, Chrome, Opera and Safari.

  11. Anyone got a significant use case for the user of currentcolor?

  12. I have an inkling that we most probably already knew that, but never really consciously put 2 + 2 together.

    For example, I realised that color also affects bullet points, but never really thought that it might work with other CSS properties as we always specify one!

    Cheers for the heads-up!

  13. Andrea Fercia says:

    also the alternate text for an image (alt attribute) is affected by the color property.

    • Ahhh.. yes. Good point.

      Of course, you’re referring to when the image is not present and the alt text displays in its place, not the alt text that displays in some browsers when you mouse over the image. I’ll add this to the article. Thanks.

  14. Nod says:

    Another element is the HR tag, been using this for years (test in FF and IE)

    • Hmmm, yes it works in Firefox, Opera, and IE6, but not in IE8, IE9, Chrome or Safari. That’s a little bit odd. I couldn’t immediately test IE7.

      Thanks, I’ll add that to the article.

  15. Yash says:

    This is amazing article . Thanks for sharing

    In fact I like all of your articles.

  16. CiNiTriQs says:

    Well, I have wondered the same thing for years now, and then I bump into this article, lol. Seriously, I have had css issues when I just started on css programming concerning some elements being coloured why I didn’t set one yet. This sometimes ended up in unnecessary time going down the shitter and me just adding colour to certain elements to override the “bug”. Anyhow, I have now a better understanding for the “color” attribute. Thanks for the article

  17. Nikunj Bhatt says:

    Thanks for the info. The info that color is also applied to border if border’s color is not specified, just remembered and solved one very old problem that I was facing on one of my client’s website. Ideally, border’s shouldn’t get inherited from color property because it has its own border-color property; and however border is not part of background but IMHO it shouldn’t be considered as foreground, border is wrapper of foreground.

    Also, the name “color” is ambiguous. It should be renamed to “fore-color”; otherwise, similar to border’s color, background’s color should also get inherited from the color property.

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).