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. You can use span tags and this property to change one word, one sentence, or even one letter to a different color.

<p style="color:#FF0000;">This 
paragraph has red font.</p>
<p>In this paragraph, only the last word is in 
<span style="color:#00FF00;">green</span>.</p>

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.

<p style="background-color:rgb(255,255,0);">This 
paragraph is highlighted in yellow.</p>

One last property is opacity. We are able to play with transparency with the RBGA and HSLA formats, but that will affect only 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 not be affected.

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

<p style="background-color:rgb(255,255,0); color:hsla(240,100%,50%,0.5);">
This paragraph's font is set to half opacity.</p>

<p style="background-color:rgb(255,255,0); color:hsl(240,100%,50%); opacity:0.5;">
The whole paragraph is set to half opacity.</p>

You Try!

Using your own text editor or the coding space below, practice using what you’ve learned about color! Style your headings, text, and tables with color and opacity. Try using Hex, RGB, HSL, and color names in your styling to see which method you like best.