CSS color vs. background-color vs. background?

In HTML when do I use color, and what is the difference between background-color and also the background tag?

What are the differences?

color is referring to the text color in that element.

background-color refers to the background color

background is shorthand to combine many background tags into one line.

background: #ffffff url("img_tree.png") no-repeat right top;

Combines color, image and background image properties in the one line instead of typing our each style individually.

w3schools

I will give you a example using this html element:

<span class="value"> This is my text </span>

.value { color: red, background-color: black}

The CSS color is used to change the text color of a html element. In this example "This is my text" would be red. The CSS background-color is used to change the background color so in this case you would get a black box with red text inside it. Finally the background is used to set all the background properties in one declaration. For example:

background: #00ff00 url("smiley.gif") no-repeat fixed center;

This changes the background color, adds the image "smiley.gif" to the background and it centers the image, it doesnt repeat the image if it has the space.

One big thing about this both css properties is, that a background-color does not overwrite an image or a gradient that has been set with this:

background:url('https://example.com/image.jpg');

or

background: linear-gradient(to bottom, #1e5799 0%,#2989d8 20%,#207cca 51%,#7db9e8 100%); 

If you are trying to change the background from an image to a color you have to use the background property.

Quick answer

• Color = Text Color
• Background-color = the color of the background
• Background = gives you the posibillity to set color, image , etc...

great tutorials on this are found here

It is true that background gives more options versus background-color. But if you only need to set background color, they are exactly the same, and each will override the other as seen in the snippet.

background: yellow;

background-color: yellow;

.bc {
  background: yellow;
  background-color: green;
}

.bc2 {
  background-color: green;
  background: yellow;
}

<div class='bc'>
  bc { background:yellow; background-color:green; }
</div>

<div class='bc2'>
  bc { background-color:green; background:yellow; }
</div>

color: is used to add color to the Text within the Tag.

color: blue;

background-color: is used to add color in background of the content inside the tag.

background-color : red;

background: is used for adding different type of background property name to the content within the Tag.

background : red url('image.png') fixed repeat cover;