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.