Coloring Text

This is the easy part! Text color uses the color: property, which, as you can see, does not have a font or text prefix.

To apply a color to a font, simply use the color property along with an appropriate color value. You can refer to tutorial 8, "Working with Color and Images Using CSS," where I applied the color property in numerous cases and discussed color values at length.

I want to color up the text a bit, so I'm going to apply color to my existing styles.

Coloring the text

body {font-family: Georgia, Times, serif; font-size: 1em; font-weight: normal; color: black;}
h1, h2 {font-family: Arial, Helvetica, sans-serif;}
h1 {font-size: 150%; font-weight: bold; color: #999;}
h2 {font-size: 130%; font-weight: lighter; font-style: italic; color: #333;}
.accent {font-weight: 700; color: red;}

You can see the headers change color in Figure.

Applying color to the body, H1, h2, and class selectors.

Of course, you can't see the red accent color applied to the accent class because of the nature of this tutorial, but be sure to write up your styles and fire up your browser to check it out for yourself.