No matter which CSS property you are using, if it involves color, you have the same options to pick from—Hex, RGB, HSL and color words. The most common color-based properties are color and background-color.

The color property is in charge of font colors. Apply this property to any element that contains text to change the color for all text inside that element. Of course, you can utilize span tags and this property to change one word, one sentence, or even one letter to a different color.

The background-color property is just what it sounds like. This lets you change the color of an element’s background. In a table, you can apply this property to change the background of the entire table, or you can place the styling on a row or individual table cell.

If this property is applied to all or part of a header, paragraph or list, it acts like you’re highlighting that text with the color you’ve chosen.

One last property that is worth mentioning is opacity. We are able to play with transparency with the RBGA and HSLA formats, but that will only affect the color property they are applied to. So if you set partial transparency with RGBA to a background-color property, only the background color will be affected. Other aspects of the element, which may include text and borders, would be unaffected.

If you want every part of an element to be affected by a transparency setting, apply the opacity property. It utilizes the same range we encountered with RGBA and HSLA. 0.0 results in total transparency while 1.0 makes an element fully opaque.