140

Anyone know why CSS provides color for text, but does not have font-color or text-color?

Seems very counter-intuitive, kind of like text-decoration: underline rather than font-style or something related to fonts.

Does anyone know why/how the W3C came up with such a wide array of CSS names like this?

4
  • 1
    I have started a petion to introduce the "font-color" property. Maybe some of you would like to sign it. change.org/p/…
    – tsuma534
    Mar 9, 2016 at 14:31
  • You can do it within the <font> tag. e.g. <font color="red">Hello World!<font>
    – airider74
    Aug 20, 2019 at 22:41
  • @airider74 What year are you living in? The <font> element has been deprecated for many years.
    – kojow7
    Oct 13, 2019 at 5:30
  • Yes it has ... but it still works
    – airider74
    Oct 14, 2019 at 5:36

3 Answers 3

196

The same way Boston came up with its street plan. They followed the cow paths already there, and built houses where the streets weren't, and after a while it was too much trouble to change.

0
116

I would think that one reason could be that the color is applied to things other than font. For example:

div {
    border: 1px solid;
    color: red;
}

Yields both a red font color and a red border.

Alternatively, it could just be that the W3C's CSS standards are completely backwards and nonsensical as evidenced elsewhere.

2
  • 4
    Try adding the following to the CSS on this page: .post-text { color: blue; border: 1px solid red; } You'll see that the text color is blue even though the border color is red.
    – Robusto
    Mar 26, 2014 at 17:10
  • then by definition, font-color is faster then color as it has to do less work.
    – kta
    Apr 27, 2014 at 4:21
10

I know this is an old post but as MisterZimbu stated, the color property is defining the values of other properties, as the border-color and, with CSS3, of currentColor.

currentColor is very handy if you want to use the font color for other elements (as the background or custom checkboxes and radios of inner elements for example).

Example:

.element {
  color: green;
  background: red;
  display: block;
  width: 200px;
  height: 200px;
  padding: 0;
  margin: 0;
}

.innerElement1 {
  border: solid 10px;
  display: inline-block;
  width: 60px;
  height: 100px;
  margin: 10px;
}

.innerElement2 {
  background: currentColor;
  display: inline-block;
  width: 60px;
  height: 100px;
  margin: 10px;
}
<div class="element">
  <div class="innerElement1"></div>
  <div class="innerElement2"></div>
</div>

2
  • I think this gives even more reason to have a separate font-color/text-color property available. That way you can have many parts of the element with one particular default colour, and the text in another if you want. Otherwise it ties the default colour to the text colour.
    – Ben J
    Feb 21, 2019 at 5:58
  • @BenJ Binding the default colour to the main colour was probably the intention in the early days of the web. Today you can use css variables (developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) and/or use a css preprocessor as Sass, Less, Stylus, etc. where it's easy to work with variables.
    – quasi
    Feb 27, 2019 at 13:25

Not the answer you're looking for? Browse other questions tagged or ask your own question.