Section 6.2. Colors

6.2. Colors

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.

Table 6-2. Color Properties

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.

Figure 6-3. When rules collide, the most specific tag wins. In this example, that means that list items are displayed in red, because the rule for the <li> tag overrides the inherited properties from the <ul> and <body> tags. However, any part of a rule that doesn't conflict with another rule is used. In this example, that means the <li> tag gets italics, bold, and center alignment, all through inheritance.


6.2.1. Specifying a Color

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.

Figure 6-4. If you apply a background color to a tag like <h1>, it colors just that line. If you use it on an inline tag like <b> or <span>, it affects only the words in the tag. Both results look oddit's a little like someone went wild with a highlighter. A better choice is to apply the background color to the whole page by applying it to the <body> tag, or just to a large box-like portion, using a tag like <div>.


6.2.1.1. Hexadecimal color 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.)

6.2.1.2. RGB color values

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.


6.2.2. Finding the Right Color

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).


Note: The RGB system lets you pick any of 16.7 million colors, which means that none of these Web sites will actually show you every single possible RGB color code (if they do, make sure you don't hit print; even with ten colors per line, you'd wind up with thousands of pages). Instead, most sites limit you to a representative sampling of colors. This works, because many colors are so similar that they're nearly impossible to distinguish by eye.

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).

Figure 6-5. In Nvu, you simply select your text and click an icon to adjust your color scheme. You get a decent color-picking window, where you can choose a color by clicking inside a small window that blends a range of reds, blues, and greens. Once you've chosen a basic color, you can fine tune how dark it is by clicking on the bar underneath the color-picking window. Keep in mind that when you apply a color in this way, it's applied using an inline style that's inserted right in the tag surrounding the text you've selected. Once you've finished choosing the color you want, you should cut it out of the tag and paste it into a rule in a full-fledged external style sheet.



Tip: The RGB color standard is alive and well in many computer programs. For example, if you see a color you love in a professional drawing program, odds are there's a way to get the red, green, and blue values for that color, which you can then use in a style sheet. This gives you a great way to match the text in your Web page with a color in a picture. Now that's a trick that pleases the strictest interior designer!
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:

  • Go monochrome . That means use black, white, and one other dark color. For example, Time magazine's Web site (www.time.com) uses its familiar bold red color for headlines.

  • Use a lightly shaded background . Sometimes, a faint wash of color in the background is all you need to perk up a site. For example, a gentle tan or gold can suggest elegance or sophistication (see the Harvard library at http://lib. harvard .edu). Or, light pinks and yellows can get shoppers ready to buy sleepwear and other feminine accoutrements (see Victoria's Secret at www.victoriassecret.com).

  • Use color in a box . Shaded boxes are a frequently used technique to highlight important areas of a Web page (see Wikipedia at http://en.wikipedia.org). You'll learn how to create boxes later in this chapter on Section 6.5.

  • Be careful about using white text . White text on a black or dark blue background can be strikingand strikingly hard to read. The rule of thumb is avoid it, unless you're trying to make your Web site seem futuristic, alternative, or gloomy. (And even if you do fall into one of these categories, you might still get a stronger effect with a white background and a few well-chosen graphics with splashy electric colors.)




Creating Web Sites. The Missing Manual
Creating Web Sites: The Missing Manual
ISBN: B0057DA53M
EAN: N/A
Year: 2003
Pages: 135

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net