It isn't difficult to inject some color into a Web page. There are really just two color - related properties that you'll use, and they're listed in Table 6-2.
Property | Description | Common Values | Oldest Supported Browsers | Can Be Inherited |
---|---|---|---|---|
color | The color of the text. This is a handy way to make headings or emphasized text stand out. | A color name , HTML color code, or RGB color value. | IE 3, Netscape 4 | Yes |
background-color | The color behind the text, for just that tag. | A color name, HTML color code, or RGB color value. You can also use transparent. | IE 4, Netscape 4 | No [1] |
[1] The background-color isn't inherited (Section 6.1.6), which means a tag doesn't get the same background color as the tag that contains it. However, there's a trick. If you don't explicitly assign a background color to a tag, its color is transparent. That means the color of the containing tag will still show through, which has the same effect.
The color property is easy to understandit's the color of your text. The background-color property is a little more unusual. If you apply a background color to the <body> tag, the whole Web page is affected, as you might expect. However, if you use the background color on an individual element, the results are a bit stranger. In CSS, what's inside of each tag is treated as though it exists in an invisible rectangle.
When you apply the background color to an element, the color applies just to this rectangle.
For example, the following style sheet applies different background colors to the page, headings, paragraphs, and any bold text:
body { background-color: yellow; } h1 { color: white; background-color: blue; } p { background-color: lime; } b { background-color: white; }
Figure 6-4 shows the result.
|
The trick to using colors is finding the appropriate code that indicates the exact shade of electric blue you love. You have several ways to go about this. First of all, you can indicate your color of choice with a plain English name, as you've seen in the examples so far. Unfortunately, this system only works with a small set of 16 color names (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow). Some browsers accept other names , but none are guaranteed to be widely supported, so it's best to use another approach. CSS gives you two more options: hexadecimal (or HTML) color values, and RGB (or red-green-blue) values.
|
With hexadecimal color values you use a strange -looking code with a pound sign (#) at the beginning. Technically, hexadecimal colors are made up of three numbers representing the red, green, and blue component of the color (similar to the RGB colors you'll learn about in the next section). However, these colors have been combined in a manner that's perfectly understandable to computers, but utterly baroque to normal people. You'll find hexadecimal color notation kicking around the Web a lot, because it's the original format that was designed for HTML. However, it's about as intuitive as reading the ones and zeroes that power your computer.
Here's an example:
body { background-color: #E0E0E0 }
Even a computer nerd can't tell that this applies a light gray background. (See "Finding the Right Color" for some tips on how to pick out hexadecimal color values, if you're determined to use this system.)
The other approach to specifying color values is to use RGB (or red-green-blue ) values. According to this more logical approach, you simply specify how much of each color you want to "mix in" to create your final color. Each component takes a number from 0 to 255. For example, a color that's composed of red, green, and blue, each set to 0, appears white; on the other hand, all those values set to 255 generates black.
Here's an example of a nice lime color:
body { background-color: rgb(177,255,20) }
FREQUENTLY ASKED QUESTION Web-Safe Colors |
Will the colors I pick show up on other computers ? When colors began appearing as the latest fad in Web pages, the computing world was very different. The average computer couldn't handle a really wide variety of colors. Many computers were limited to a relatively small set of 256 colors, and had to deal with other colors by dithering (a dubious process that combines little dots of several colors to simulate a different color, leading to an unattractive speckled effect). To avoid dithering, Web designers came up with a standard called Web-safe colors , which identifies a set of 216 colors that can be reliably used on any computing platform. Even better, they always look almost exactly the same. Today, the world is a little different, and you'd be hard pressed to find a computer that can't display at least 16,000 colors (a standard called 16-bit color, or high color ). Most support a staggering 16.7 million (a standard called 32-bit color, or true color ). In this environment, it's rarely worth worrying about the Web-safe colors anymore, and the standard is just another piece of computing history. However, there is one exception. If you plan to create Web pages for very small devices (like cell phones or palmtop computers), which have much leaner hardware, you might change your mind and decide to pare down your Web pages and limit yourself to Web-safe colors only. To check out the list of safe colors, surf to www.w3schools.com/css/css_colors.asp. Even if you aren't concerned about serving this still relatively small audience of tiny devices, it's still a good idea to look at your Web pages on a variety of computers. That's because different monitors don't always display the same colorssome tend to tint colors unexpectedly, and Windows computers tend to produce darker colors than their Macintosh counterparts (even when using the same monitor). Pick colors carefully , because a color combination that looks great on your computer can look nauseating (or worse , be illegible) on someone else's. |
Style sheets can handle absolutely any color you can imagine. But how do you find the color code for the perfect shade of sunset orange (or dead salmon) that you need?
Sadly, there's no way this black and white book can show you your choices. But there are a great number of excellent color-picking programs online. You have two options hereyou can download a free color-picking program, or you can hunt around on the Web to find an online color-picking program, which is often more convenient .
For example, try www.webtemplates.com/colors, where all you need to do is click a picture to preview the color you want (and see its hexadecimal code). Other handy online color pickers include http://mediagods.com/tools/rgb2hex.htm and www.colorschemer.com/online.html (where you can see groups of colors that match).
If you're using an HTML editor like FrontPage, Dreamweaver, or Nvu, life gets a little easier. These programs have built-in color picking tools (see Figure 6-5).
|
DESIGN TIME Making Color Look Good |
Nothing beats black on white for creating a crisp, clean, easy-to-read Web page with real presence. Black text and white backgrounds also work best in Web pages that have a lot of colorful pictures. It's no accident that almost every top Web site, from news sites (www.cnn.com) to search engines (www.google.com) to e-commerce shops (www.amazon.com) and auction houses (www.ebay.com) all use the winning combination of black on white. But what if you're just too colorful a person to leave your Web page in plain black and white? The best advice is to follow the golden rule of color: use restrain . Unless you're creating a sixties revival site or a Led Zeppelin tribute page, you don't want color to run wild. Here are some ways that you can inject a splash of color without letting it take over your Web page:
|