Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS "color" vs. "font-color"

Tags:

css

People also ask

What is the difference between color and font color?

The color attribute specifies the color of the text inside a <font> element. You can set the size of the text but not the color of the text with the font-size property. Please feel free to ask if you have any questions.

What is font color in CSS?

Text ColorThe color property is used to set the color of the text. The color is specified by: a color name - like "red" a HEX value - like "#ff0000"

Is font color a CSS property?

A CSS font color is set using the color property. The color property sets the color of text, not the background of the element. You can use CSS color keywords or color values like hexadecimal strings to set a color. This rule sets the color of all <p> tags in an HTML document to red.

How do I choose a font color in CSS?

Simply add the appropriate CSS selector and define the color property with the value you want. For example, say you want to change the color of all paragraphs on your site to navy. Then you'd add p {color: #000080; } to the head section of your HTML file.


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.


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.


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>