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.
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.
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).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.
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.
Yes, you’re correct! Bullets (or list markers) on an unordered list will inherit the color. Thanks, I’ll update the article.
interesting. I always thought color is just for text color. Thanks for sharing.
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! :)
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!
Interesting info. Thanks!
Using color for an unordered list bullet is a nice piece of advice. Thanks for sharing.
Oh.. my god.
its amazing and interesting too. Thanx Louis for in-depth.
Mind=blown. Thanks though, now I finlly found out how to give bullets a different color than the list items themselves :P
All of this is inconsequential as it should be named colour anyway ;-)
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.
Yeah, I noticed that when looking at “color” in the spec. I’ll have to look into that a little more. Thanks for the link.
Thanks, you learn something new every day !
Anyone got a significant use case for the user of currentcolor?
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!
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.
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.
This is amazing article . Thanks for sharing
In fact I like all of your articles.
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
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
colorproperty because it has its ownborder-colorproperty; 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
colorproperty.