Color (CSS)

From App Academy
Jump to navigation Jump to search

The color property is used to set the color of an element's text and it's decorations [1]. The color property can be thought of the property that changes the color of text since it doesn't modify the color of any other characteristic found in an element.

Examples

There are many ways to set the color of the text. Below you will find some of the more common ways to set the text color to green in CSS.

Keywords

The keyword approach to setting the text color is the simplest. To set a color simply you type out the name of the color. There are over 100 color keywords that may be used. To view more keywords visit HTML Color Codes.

color: green;

Hexadecimal

The hexadecimal approach allows us to use hexadecimal values (0 through 9, A through F) to set the color. This gives us the ability to use more specific shades of color. Below are two examples that set the color to the same shade of green. The 3 value hexadecimal code is an abbreviated form of the 6 value code. You can choose a more specific color using a color picker such as the one found here: ColorPicker.

/* 6 Values */
color: #00FF00;
/* 3 Values */
color: #0F0;

RGB

The RGB approach is similar to the hexadecimal approach but uses numbers (0 through 255) to represent color. Three values are used to set the strength of red, blue, and green values.

An additional fourth value can also be used. This value is referred to as the alpha channel. This alpha channel sets the opacity of the color. Setting the value to 1 allows it to be fully opaque, 0 is fully transparent. You can use decimal numbers found between 0 and 1 (such as 0.3) to set the opacity of the color. Also, note the difference in the declaration of the property (rgb vs. rgba). The following color picker also demonstrates RGB values for any chosen color: ColorPicker.

color: rgb(0, 255, 0);
color: rgba(0, 255, 0, 0.5);

References

  1. Mozilla Developer Network - "Color Property"