Colors

XHTML allows you to change the text (foreground) color and the background color of any tag.

Text Color

Here's how to change the text color:

  1. Add a "style" to the tag. (<tagname style="">)

  2. Inside the style attribute, specify the color you want by typing color: followed by the color you want. (<tagname style="color: green">)

source

Red Paragraphs 

<p>
  Happy Fun Ball -- Fun for the whole family!  
  Only $14.95!
</p>
<p style="color: red">
  WARNING: Pregnant women, the elderly and 
  children under 10 should avoid prolonged 
  exposure to Happy Fun Ball. 
</p>

We've already seen this example, but here it is again:

results

Red Paragraphs

Happy Fun Ball -- Fun for the whole family! Only $14.95!

WARNING: Pregnant women, the elderly and children under 10 should avoid prolonged exposure to Happy Fun Ball.

Background Color

To change the background color of a tag, you just need to use a different property in the style attribute: the background property. Many people use the background property in the <body> tag, which changes the background color of the entire web page. However, you can change the background color of any tag. You can also change the background color and the text color at the same time:

source

Text and Background Color

<p style="background: aqua">
And all the roads that lead to you were winding <br />
And all the lights that light the way are blinding <br />
There are many things that I would like to say to you <br />
I don't know how <br />
</p>

<p style="background: green; color: red">
Yeah, the night's not over 

You're not trying hard enough, 

Our lives are changing lanes 

You ran me off the road! 

</p>

Note that we specified two style properties in the second paragraph, background and color. The order of the properties doesn't matter, and note we have used a semicolon to separate the properties.

Let's take a look at the results:

results

Text and Background Color

And all the roads that lead to you were winding
And all the lights that light the way are blinding
There are many things that I would like to say to you
I don't know how

Yeah, the night's not over
You're not trying hard enough,
Our lives are changing lanes
You ran me off the road!

The results for the second paragraph are particularly garish and difficult to read, even if you're not red/green colorblind. This brings up an important point: it is very easy to go wrong when choosing text and background colors. Use the color and background properties with caution.

Inline Color Styles

As I mentioned in the previous section, you can add a style attribute to just about any tag. For example, if you wanted an emphasis tag to be italic and green, you would include the style attribute just as we did in the previous examples: <em style="color: green">.

If you just want to change the color of a selection of text without also making it bold or italic, there is a special inline tag called the <span> tag. The <span> tag "does nothing" by default, and so it is safe for applying styles without affecting anything else. We'll talk about <span> more later.

Color Names and Hex Codes

In the previous examples, we were using color keywords such as "red", "green", and so on. Here are sixteen color keywords that are nearly universal across all browsers that support color:

Standard Color Table
black
#000000		 gray
#808080		 silver
#c0c0c0		 white
#ffffff
navy
#000080		 blue
#0000ff		 teal
#008080		 aqua
#00ffff
green
#008000		 lime
#00ff00		 olive
#808000		 yellow
#ffff00
maroon
#800000		 red
#ff0000		 purple
#800080		 fuchsia
#ff00ff

The numbers after the pound sign (#) are called hex codes. Hex codes are another way to represent colors in HTML. Each of the six numbers in the hex code is a hexadecimal number. In the ordinary decimal system, each numeral (0-9) represents a power of ten. In a hexidecimal system, each numeral represents a power of sixteen, and so you need sixteen symbols (0-9 and A, B, C, D, E, F) where A = 10 (decimal), B = 11 (decimal), and so on up to F = 15 (decimal). With two decimal numbers, the highest number you can make is "99": (nine x ten) + (nine x one) = 99. With two hexadecimal numbers, the highest number you can make is "FF", which is 255 in decimal notation: (fifteen x sixteen) + (fifteen x one) = 255.

A hex code is a triplet of two-digit hexadecimal numbers that indicates how much red, green, and blue the browser should display. The first two digits indicate how much red to use, the second two indicate the amount of green, and the last two specify the blue: RRGGBB. "00" means "use none of this color", while "FF" means "use as much of this color as possible".

Hex codes can be uppercase or lowercase. Just don't forget the pound sign at the beginning. There are actually several more ways to specify colors, but color names and hex codes are the most common.

Hex Codes vs. Color Names: Which is Better?

Hex codes are a bit harder to understand than color names, particularly if you're not used to hexadecimal notation. However, it's probably better to use hex codes anyway. First, hex codes provide much more flexibility -- you can specify about 16 million different combinations with hex codes. (Many people have computers that can't display that many colors, but that's another matter.) There aren't anywhere near that number of color names. Second, hex codes are more stable and universal. Simple color names such as "red" and "black" will work in just about any browser, but support for fancy color names (such as "papayawhip") is a bit dodgier. It's best to stick with hex codes, which are understood universally.