Why/when "color" vs. "background-color?"

Rhonda,

The simple "color" property is reserved for font color, as you mentioned, and the difference between the other ones? Background-color and background, border-color and border? The "background" and "border" properties are simply shorthand for the rest, and can set all of their respective properties in one declaration. For example, this:

div {
    background: #52ba3d url('../img/picture.jpg') no-repeat cover;
}

Is the same as writing out this:

div {
    background-color: #52ba3d;
    background-image: url('../img/picture.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

You just don't have to spend all that time to write out each and every individual property declaration! They allow you to condense it all into the generic, blanket "background" property. The same idea goes for "border-color" and "border". There is no rule as to when to use one over the other, and the reason why you would is to save yourself time and lines of code. Neither way is strictly better than the other, necessarily. It really boils down to personal preference! It's good to become familiar with all of the individual properties that are available to you, but once you are, shorthands are a nice way to achieve the same effect in a quicker fashion!

Hope this helps!

Erik