17. Introduction to Color Properties

Color is fundamental to CSS styling. We primarily control color in two areas: the foreground (text) and the background of an element.

1. Foreground Color (color)

The color property sets the color of the element's text content.

css p { /* Sets the text color of all paragraphs to green */ color: green; }

h1 { color: rgb(255, 0, 0); /* Pure Red */ }

2. Background Color (background-color)

The background-color property sets the solid color visible beneath the element's content and padding.

css .alert { background-color: #f0f0f0; /* Light gray background */ border: 1px solid black; padding: 15px; }

Color Values (Formats)

CSS supports several methods for defining color values. You should be familiar with the main three:

A. Keyword Colors

Simple, predefined names (about 140 of them). css color: blue; /* or tomato, aquamarine, etc. */

B. Hexadecimal Colors (Hex Codes)

Uses a hash symbol (#) followed by six characters (0-9, A-F), representing Red, Green, and Blue (RRGGBB). css color: #FF0000; /* Pure Red / background-color: #333333; / Dark Gray */

C. RGB and RGBA

Red, Green, Blue values, each ranging from 0 to 255. RGBA adds a fourth channel: Alpha (opacity), ranging from 0 (fully transparent) to 1 (fully opaque).

css /* Standard Black */ color: rgb(0, 0, 0);

/* 50% opaque black */ background-color: rgba(0, 0, 0, 0.5);