CSS Workarounds

Using Color

Color is a profoundly important part of design, largely because it affects people in a visceral, emotional way. The colors you choose for your site will significantly impact the way your visitors interpret your message.

Color can be exciting, calming, persuasive, elegant, uplifting. What's more, perspectives related to culture, language, geography, and gender complicate the meaning of color, too.

Consider the following:

• Death is represented by black in most of Western society, whereas in many Eastern cultures, death is represented by white.

• For the Yup'ik Eskimo, there are 15 variations on the word 'snow.' Many of the subtleties within these definitions are based on features specific to color: hue, opacity, lightness, and darkness.

• It appears that women are capable of naming many more color names than men. This is likely due to more of an awareness of color variations rather than a physiological difference, although interestingly, color blindness is more predominant in males.

Color is a rather astonishing blend of science and art, physiology and human perception. Using CSS, designers are empowered to do things with color that will really bring a fresh perspective to contemporary web design.

With CSS, you can apply color not just to an element but also to specific portions of that element, such as a particular border style on a specific border. The flexibility of CSS gives us countless options as designers-options we've only barely tapped in the short time we've actually been able to enjoy CSS's powers.

Color and the Web

Before you dig too deeply into CSS color, it's important to know a few things. If you're trained in computer-related or design technology, you might be aware of color models. If you have a background in design or web design, you've undoubtedly heard about web-safe colors. If not, this section will provide information on both, some of which you might find surprising.

Color Models

There are several color models in graphic design. These models exist to manage various aspects of how color is managed and ultimately seen in a range of media.

Color models are based on color theories. Color theory is an extremely complicated topic, and with the exception of the generalities I'll be discussing here, its details are far beyond the scope of this book. Take a look at the 'Learn More About Color' sidebar for some ideas on where to get more information.

Color theory, for our needs here, can be broken down into two general groups: subtractive synthesis and additive synthesis. Subtractive synthesis is the idea that what you see in the real world and how you recreate organic color via dyes and inks is based on how much or little light interacts with the given pigment. The familiar color wheel is an example of subtractive synthesis (see Figure 5.1).

Figure 5.1: The familiar color wheel

The color model known as CMY-Cyan, Magenta, Yellow-is a means used by computers for expressing colors in subtractive synthesis. With the addition of black, which creates the color model CMYK, this is the means by which colors are reproduced in print (see Figure 5.2).

Figure 5.2: CMYK color

But computers are different when managing screen color because they rely on additive synthesis to create that color (Figure 5.3). Computers generate light. There are three colors of light that computers generate: Red, Green, and Blue. To create a given color on screen, varying amounts of Red, Green, and Blue are mixed. White is the total amount of Red, Green, and Blue respectively, and Black is the absence of Red, Green, or Blue.

Figure 5.3: RGB color

 Note  How well color is replicated onscreen is based upon not only a requested value but also how effectively the unique combination of hardware and software can reproduce that color.

When you use hexadecimal or color name values in HTML or XHTML, those values all relate to RGB. In hexadecimal (base 16) the numeric values of red, green, and blue are respectively represented by the base 16 alphanumeric string of six characters. While color names are more obvious, they, too, are simply another means of representing a color within the RGB color model. Ultimately, these hex and name values ask that a computer display the related RGB value.

 Note  CSS naturally uses the RGB model because it is predominantly a screen-based technology. Values in CSS are quite a bit more flexible than those presentational attribute values available in HTML and XHTML.

Web-Safe Color

Web-safe color came about because of specific problems between the ways different platforms manage color. By limiting the palette to 216 colors (see Figure 5.4), the idea was that dithering-the computer attempting to create a close approximation of a color it couldn't quite support-would be avoided.

Figure 5.4: The 216 colors of the web-safe palette

These 216 colors were considered the common denominator between Windows and Macintosh during a time when most Web users had limited color support via hardware and software anyway.

 Note  Bring Unix and Linux into the mix and you find that there are even fewer colors available that probably won't dither in limited color support situations.

There is no such thing as truly consistent color on a computer screen. This is due to what I mentioned earlier-color reproduction on a screen is not just at the mercy of the RGB color model, it's also at the mercy of the hardware and software that individual computer is using. Other issues, such as a computer's ability to manage Gamma, the intensity produced by specific monitors, also influence this issue. When you think of how many possible combinations of video cards, video monitors, operating systems, and operating system versions exist, it's easy to see why color reproduction onscreen is so inconsistent.

Add to that complicated mix the fact that different web browsers and browser versions manage color differently, and you really end up with a lot of possibilities. In my office there are currently three computers with different configurations, and all of them are displaying the same web page with significant differences in the display of the supposedly 'safe' colors.

Because of this, I believe that there is no such thing as web-safe color. If you can't have color consistency between individual configurations, how can you possibly have color consistency when you add browsers into the soup? The fact is, you cannot.

What may be closer to reality is web-safer color.

 Note  There's been some web-safe color testing that demonstrates different viewpoints. See www.visibone.com/colorlab/colortest.html and http:// hotwired.lycos.com/webmonkey/00/37/index2a.html for more information.

So what does this mean to you? Should you not use web-safe colors? Well, that's going to mostly depend upon your audience. If you're dealing with an audience that is largely using older computers, you may have more impetus to avoid dithering.

But the majority of designers have little to worry about for most of their site visitors. Consumer computers now ship with fairly high-end color management for all platforms, so even if a given user doesn't optimize their system for color management, their default is going to be able to manage almost any color. Will that color look the same on that computer configuration as on mine? Probably not. But it's the best we can get, and so it must do.

As a result, you'll see a mix of colors used throughout this book. Some of these colors fall into the web-safe category, while others do not.

Learn More About Color

Color means a lot to me, so I've written a bit about it. Here are three articles and a book to help you learn more about web color.

Satisfying Customers with Color, Shape, and Type

Originally written for Web Techniques Magazine, this article describes using color effectively on the Web: www.molly.com/articles/webdesign/1999-11-customers.php.

Color My World

This article focuses on international color design for the Web: www.molly.com/articles/webdesign/2000-09-colormyworld.php.

True Colors

In this article, you'll take a deeper look at web color technology, and what is 'safe' or 'unsafe' color: www.molly.com/articles/webdesign/2001-05-truecolors.php.

Color for Websites

The name says it all! This is a large-format, hard-cover book that takes a close look at color for the web, in full color, hardback, from Rotovision: www.rotovision.com/description.asp?bookid=500#.

Applying Color

Color is applied in CSS by combining appropriate properties with color values. There exist numerous properties related to color, but the core color property I'll begin with is, simply, color.

The color property specifically defines the foreground of an element's text-based content.

So, if you write this rule:

body:  {      color: #000000; }

it means that all text elements, unless other rules are provided for them, will be black.

To work through the examples in this section-and for many of the examples in the rest of the chapter-you'll begin with a simple listing and style sheet. I've embedded the sheet so that everything is kept in one document here, but you can certainly separate the style sheet out into a linked sheet should you so desire.

Listing 5.1 shows the basic document.

Listing 5.1:  WWW.   A Document with Some Basic Styles

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"       "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head>    <title>Chapter Five</title> <style type="text/css"> body  {      font: 16px Verdana, Arial, Helvetica, sans-serif;      margin: 20px; } h1  {      font: bold 28px Verdana, Arial, Helvetica, sans-serif; } h2  {      font: bold 24px Verdana, Arial, Helvetica, sans-serif; } </style> </head> <body> <h1>color my world</h1> <p>The way color is used in a worldwide context is a profound issue that's 
often misunderstood or overlooked by Web designers. How it's used on the 
screen is made more challenging by the fact that the perception of color 
depends not only upon our ability to see that color, but also on our 
ability to interpret it within the context of our emotional and cultural
realities.</p> <h2>gender and color</h2> <p>Another issue often missed when determining color is gender. Men's and 
women's reactions to color are significantly different and, when combined 
with cultural issues, the challenge becomes quite complex. </p> <p>"In our culture, real men don't eat quiche and they don't use color 
terms like ‘mauve' and ‘teal,'" quips Morton. "I don't think men are as 
sensitive as women to color."</p> <p>"The Meaning of Color for Gender" by Natalia Khouw points out some 
interesting theories derived from academic studies about color and gender, 
including the following:</p> <ul> <li>Blue stands out for men much more than for women</li> <li>Men prefer blue to red, women red to blue</li> <li>Men prefer orange to yellow, women yellow to orange</li> <li>Women's color tastes are thought to be more diverse than men's</li> </ul> <p>One of the studies cited in the paper was done in Nepal, where men and 
women were asked to list all of the colors they could think of. Women were 
able to consistently list more colors than men could. A similar study 
in England had similar results, with women identifying many more colors than 
men could.</p> <hr />
 </body>
</html>

Figure 5.5 shows the document as it appears prior to the styles you'll be adding in this chapter.

Figure 5.5: The simply styled document

Color values in CSS are quite a bit more flexible then those in HTML and XHTML. You can apply color values in the following ways:

Color names There are 16 valid color names that you can use in CSS2. CSS2.1 adds the color orange for a total of 17 valid names. There's a table in Appendix A that you can refer to when you need a quick look at these colors, but because it's a short list, I'll provide them here also for the purpose of our discussion. The color names you can use are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

An example using a color name:

body  {      color: black; }

This would cause all the text within the body (and any children of the body) to have the color black unless other rules are specified.

Note 

 The 16 color names in CSS come from the HTML 4 specification. It's interesting to note that most of the colors in this list are not considered to be web safe.

Hexadecimal values (long form) You can use any hexadecimal value you like with CSS. The correct form is to use the octothorpe, also known as a hash mark (#), followed by the correct hexadecimal equivalent of the RGB value that you'd like to use:

#663366;

Here's an example for a heading level 1:

h1  {      color: #663366; }

If you add this rule to a style sheet for the example described in Figure 5.1, the h1 turns a dark purple hue (see Figure 5.6).

Figure 5.6: Adding color using a hexadecimal value

Hexadecimal shorthand values Any hexadecimal value that contains double characters can be written in shorthand. In other words, if you take the value #cc99cc, you'll notice the red, green, and blue values are represented by a value pair of either letters (CC) or numbers (99). You can shorthand this type of hexadecimal value as follows:

#c9c

You'll notice that I still use the octothorpe, and I shortened each pair to its singular value. Here's a sample as applied to a heading level 2.

h2  {      color: #c9c; }

Figure 5.7 shows that the h2 is now lavender.

Figure 5.7: Using shorthand to apply color to headings

It's important to keep in mind that shorthand values are only available for paired values as described here. If you have a hexadecimal value that is not paired, such as #B03060, you cannot make it shorthand because the interpretation is based on pairing.

RGB numeric values You can use the literal number value for red, green, and blue in sequence. This is done by denoting that you're using the RGB value and then placing the values, separated by commas, into parentheses:

rgb(051, 051, 102)

To style the bulleted list using this subtle blue RGB value, you would do the following:

ul  {      color: rgb(051, 051, 102); }

Figure 5.8 shows the results.

Figure 5.8: using specific RGB values

RGB percentage values Another means of writing RGB values is to use percentages. The percentage relates to how much red, green, or blue is used to create the color: 100 percent of each color creates white, whereas 0 percent of each creates black. The syntax for RGB percentage values is as follows:

rgb(0%, 50%, 100%)

You can get creative and use this light blue color to style the horizontal rules within the document:

hr  {      color: rgb(0%, 50%, 100%); }

Note 

 While most common browsers do, not all browsers support the color property to style horizontal rules. If you do decide to use this method, be sure to test in those browsers that do. Another approach would be to style a bottom border, which you will learn how to do later this chapter.

Listing 5.2 shows all of the color styles created here in a style sheet together. It's not a problem to combine value methods as I've done here, as long as the syntax for each rule is correct.

Usually, for quick mockups, sticking to color names is very handy. My own preference is to use RGB values, because these can be most easily matched to any existing RGB value guidelines without having to convert to hexadecimal.

Listing 5.2:  WWW.   The Style Sheet Using Multiple Color Values

body  {      font: 16px Verdana, Arial, Helvetica, sans-serif;      margin: 20px;      color: black; } h1  {      font: bold 28px Verdana, Arial, Helvetica, sans-serif;      color: #663366; } h2  {      font: bold 24px Verdana, Arial, Helvetica, sans-serif;      color: #c9c; } ul  {      color: rgb(051, 051, 102); } hr  {      color: rgb(0%, 50%, 100%); }

Figure 5.9 shows the colorful results.

Figure 5.9: Every means of specifying color is used to create the colors within this page