“Changing the Background Color” briefly introduced how to change the background color to yellow. That’s kind of neat, but this just raises more questions. If yellow is available, what are the other colors I can use? Can I change the foreground color? Can I apply colors to just a small selection of text?
Text (Foreground) Color
Here’s how to change the text color:
Add an attribute called
styleto the element. (
styleattribute, specify the color you want by typing
color:followed by the color you want. (
<element style=”color: red”>)
As with all attributes, do not include the
styleattribute in the closing tag,
<p> The grandmother lived out in the wood, half a league from the village, and just as Little Red-Cap entered the wood, a wolf met her. Red-Cap did not know what a wicked creature he was, and was not at all afraid of him. </p> <p style="color: red"> 'Good day, Little Red-Cap,' said he. </p> <p> 'Thank you kindly, wolf.' </p>
In the earlier example,
Example 1.6, “Background Color”, the background of the
entire page turned yellow. But in our example above, the
text turns red. A
style attribute value of
background: sets the background
color: sets the
background are called
CSS properties. CSS (Cascading
Style Sheets) is a technique for applying
style to elements. Changing the
element’s color is just one small example of what CSS
can do. We’ll learn a lot more about CSS in
Chapter 3, Styling Basics, but for now let’s
focus on color specifically.
To change the background color of a element, you just
need to use a different property in the
background property. If you
apply the background to the
body element, this
changes the background color of the entire web page. (We saw
an example of this in
“Tinkering”.) Not only can you change an element’s
background color, you can change the text color at the same
<p style="background: yellow; color: purple"> There's a yellow rose in Texas, That I am going to see,<br> Nobody else could miss her, Not half as much as me.<br> She cried so when I left her, It like to broke my heart,<br> And if I ever find her, We nevermore will part. <br> </p>
The paragraph has two properties,
you apply multiple properties, you can add them in any
order, but you must separate them with a semicolon. If you
forget the semicolon:
<p style="background: yellow color: purple">
then the browser interprets this as setting the
background color to the value
yellow color: purple.
yellow color: purple is not a valid
color, the browser does nothing (and you might be left
puzzling over why your styles aren’t appearing).
The results, Example 2.11, “Text and Background Color” are particularly garish and difficult to read. 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
Although so far we’ve only applied the color properties
to block elements such as
you may apply the color properties to inline elements as
well, including the elements from
“Font Styles”. For example,
<p><strong style="color: red">DANGER:</strong> Flying monkeys.</p>
The red color applies to the
but not to the rest of the paragraph.
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 element called the
span element “does nothing” by default, and
so it is safe for applying styles without affecting anything
else. We’ll discuss this element further in the section
“Div and Span”.
Although you may apply the
attribute to a wide array of elements, there are some
exceptions. For example, you might think you can change
the color of the title in your browser’s titlebar by
style attribute to the
element. However, this is invalid HTML, and the browser
In general, you may apply style to nearly any element
that falls under
In the previous examples, we were using color keywords such as “red”, “green”, and so on. What other words are available? The answer it, it depends on your browser.
Here are sixteen color keywords that are nearly universal across all browsers that support color:
Figure 2.1. Standard Color Keywords
The numbers after the pound sign (#) are called hex codes. Hex codes are another way to represent colors in HTML. It gets a little technical after this, so hang on…
Those of you who grew up in the 1960s and experienced the “New Math” might have a small advantage here. See, I bet you thought you’d never use that stuff again!
Each of the six numbers in a hex code is a hexadecimal, or base-16 number.
In the ordinary decimal system, each numeral (0-9) represents a power of ten. You need ten symbols to represent decimal numbers: 0, 1, 2, 3, 4, 5, 6, 7, 8, and last but not least, 9.
With two decimal numerals, the highest number you can make is “99″. “9″ in the tens place + “9″ in the ones place = (nine x ten) + (nine x one) = 90 + 9 = 99.
In a hexadecimal system, each numeral represents a power of sixteen, and so you need sixteen symbols (0-9 and a, b, c, d, e, f). Here, a = 10 (decimal), b = 11 (decimal), and so on up to f = 15 (decimal).
With two hexadecimal numerals, the highest number you can make is “ff”, which is 255 in decimal notation. “f” in the sixteens place + “f” in the ones place = (fifteen x sixteen) + (fifteen x one) = 240 + 15 = 255.
A color hex code consists of three two-digit hexadecimal numbers. Each number indicates how much red, green, and blue the browser should display. The first hex number indicates how much red to use, the second indicates the amount of green, and the third specifies the blue: RRGGBB. “00″ means “use none of this color”, while “ff” means “use as much of this color as possible.”
Figure 2.2, “Hex Code #ff9933″ demonstrates how this works. The hex code #ff9933 provides the maximum amount of red, a middling amount of green, and a small amount of blue. Mixing the three together results in an orange-ish color.
Figure 2.2. Hex Code #ff9933
Here are some more examples:
color: #ff0000= All red, no green, no blue. Result: bright red.
color: #00ffff= No red, all green, all blue. Result: bright teal (or “aqua”).
color: #000000= No red, no green, no blue. Result: black.
color: #ffffff= All red, all green, all blue. Result: white.
color: #cc99ff= A lot of red, some green, all blue. Result: lavender.
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 computers 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 (”papayawhip”? “eggshell”?) is a bit dodgier. It’s best to stick with hex codes, which work universally.