“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. (
- Inside the
styleattribute, specify the color you want by typing
color:followed by the color you want. (
As with all attributes, do not include the
styleattribute in the closing tag,
Example 2.10. Red Paragraph
<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, while
color: sets the foreground color.
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
style attribute: 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 time:
Example 2.11. Text and Background Color
<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,
color. When 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"> 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>
then the browser interprets this as setting the background color to the value
yellow color: purple. Since
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
p, 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
strong element, 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. 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
style 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 adding a
style attribute to the
title element. However, this is invalid HTML, and the browser ignores it.
In general, you may apply style to nearly any element that falls under
In the previous examples, we were using color keywords such as
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:
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.
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.)
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.