css 101


Specifies the foreground or background color of any selected area. In practice, foreground usually refers to font and border colors, while background-color refers to, well, the background color.

Usage example:

In earlier examples, we've been referring to colors by their "friendly" names, such as "blue" or "gray". There are only 216 of these "friendly color names" in HTML/CSS, but you'll want access to the full range of colors in the spectrum for your web work. Therefore, most of the time you'll be referring to colors by their "hexadecimal values," such as "#7FFFD4." You can obtain hex color values in a bunch of ways. Your text editor may have a color picker built in, which can insert color values into your CSS code automatically.

TextMate color picker
In TextMate, hit Cmd-Shift-C anywhere a color can be inserted to select a color. When you click OK, The hexadecimal equivalent of the selected color will be inserted at that point. Other text editors should have similar features.

You may need to extract a color value from Photoshop or Flash, in which case you can look for hexadecimal values in those tools' color pickers, and copy/paste color values back and forth between images and CSS. Or you may use any of the hundreds of web-based color pickers out there. One of our favorites is colorhunter.com, which will let you create entire palettes of complementary color values, and email the hex values to yourself for reference. We'll refer to colors by their hex values throughout the rest of this tutorial.