Hour 7. Working with Colors and Borders

Each of these tasks is short and sweet, and will help you move your web development experience from the white background/black text examples so far in this book to more interesting (or at least colorful) examples. But that’s not to say that dark text on a light background is bad—in fact, it’s the most common color combination you’ll find online.

Paying attention to color schemes and producing a visually appealing website is important, but you don’t have to be an artist by trade to implement high-impact color schemes in your website, or to put a few appealing flourishes on what otherwise would be a drab, square world. This hour helps you understand the very basics of color theory and how to modify colors using CSS.

You might wonder how respect enters into the mix when talking about colors, but remember that the World Wide Web is an international community and that people’s interpretations differ. For instance, pink is very popular in Japan but very unpopular in Eastern European countries. Similarly, green is the color of money in the United States, but the vast majority of other countries have multicolored paper bills—“the color of money” thus isn’t a single color at all, so the metaphor would be of no value to international visitors.

Besides using culturally sensitive colors, other best practices include the following:

Use a natural palette of colors. This doesn’t mean you should use earth tones, but use colors that you would naturally see on a casual stroll around town—avoid ultrabright colors that can cause eye strain.

Use a small color palette. You don’t need to use 15 different colors to achieve your goals. In fact, if your page includes text and images in 15 different colors, you might reevaluate the message you’re attempting to send. Focus on three or four main colors, with a few complementary colors at most.

Consider your demographics. You likely can’t control your demographics, so you have to find a middle ground that accommodates everyone. The colors younger people enjoy are not necessarily the same ones older people appreciate, just as there are color biases between men and women and people from different geographic regions and cultures.

You might be thinking now that your color options are limited. Not so—you simply need to think about the decisions you’re making before you make them. A search for “color theory” in the search engine of your choice should give you more food for thought, as will the use of the color wheel.

The color wheel is a chart that shows the organization of colors in a circular manner. Its method of display is an attempt to help you visualize the relationships among primary, secondary, and complementary colors. Color schemes are developed from working with the color wheel; understanding color schemes can help you determine the color palette to use consistently throughout your website. For example, knowing something about color relationships will hopefully enable you to avoid using orange text on a light blue background, or bright blue text on a brown background.

Some common color schemes in web design are as follows:

Analogous—Using colors that are adjacent to each other on the color wheel, such as yellow and green. One color is the dominant color, and its analogous friend enriches the display.

Complementary—Using colors that are opposite each other on the color wheel, such as a warm color (red) and a cool color (green).

Triadic—Using three colors that are equally spaced around the color wheel. The triadic scheme provides balance while still allowing rich color use.

Entire books and courses are devoted to understanding color theory, so continuing the discussion in this book would indeed be a tangent. However, if you intend to work in web design and development, you will be served well with a solid understanding of the basics of color theory. Spend some time reading about it—an online search will provide a wealth of information.

Additionally, spend some hands-on time with the color wheel. The Color Scheme Designer at http://colorschemedesigner.com/ enables you to start with a base color and produce monochromatic, complementary, triadic, tetradic, analogic, and accented analogic color schemes.

Obviously many more than just those 17 colors are displayed on the web—in fact, you can use 140 color names with the assurance that all browsers will display these colors similarly. Here’s a partial list of the 140 descriptive color names: azure, bisque, cornflowerblue, darksalmon, firebrick, honeydew, lemonchiffon, papayawhip, peachpuff, saddlebrown, thistle, tomato, wheat, and whitesmoke.

But names are subjective—for instance, if you look at the color chart of 140 cross-browser color names, you’ll see that you can’t distinguish between fuchsia and magenta. The associated hexadecimal color values for those two terms, fuchsia and magenta, are also exactly the same: #ff00ff. You learn about hexadecimal color values in the next section, but for now, know that if you want to be standards compliant and use more than the 16 color names the W3C standards dictate, you need to use the hexadecimal color codes whenever possible.

Hexadecimal color codes make possible 16 million colors, and most modern computer displays can display all of them. However, be aware that not all computer monitors display colors in the same hues. What might appear as a beautiful light blue background color on your monitor might be more of a purple hue on another user’s monitor. Neutral, earth-tone colors (such as medium gray, tan, and ivory) can produce even more unpredictable results on many computer monitors. These colors might even seem to change color on a single monitor, depending on lighting conditions in the room or time of day.

In addition to changing the background of your pages to a color other than white, you can change the color of text links, including various properties of links (such as the color for when a user hovers over a link versus when the user clicks a link—as you learned in previous hours). You can also set the background color of container elements (such as paragraphs, divs, blockquotes, and table cells), and you can use colors to specify the borders around those elements. You’ll see some examples of colors and container elements later in this lesson.

There are plenty of very bad websites, some created by earnest people with no trace of irony whatsoever. However, The World’s Worst Website, in Figure 7.1, was purposefully created to show some of the more egregious sins of website design, especially with its use of colors. A screenshot does not do it justice—visit and experience the site for yourself, at http://www.angelfire.com/super/badwebs/main.htm.

If you search for “bad website examples” in your search engine, you will find many sites that collect examples of bad design and explain just why such a site should be in a Hall of Shame rather than a Hall of Fame. Many sites are considered bad because of their visual displays, and that display begins with color selection. Therefore, understanding colors, as well as the nuances of their specification and use, is a crucial step to creating a good website.

The hexadecimal color format is #rrggbb, in which rr, gg, and bb are two-digit hexadecimal values for the red (rr), green (gg), and blue (bb) components of the color. If you’re not familiar with hexadecimal numbers, don’t sweat it. Just remember that ff is the maximum and 00 is the minimum. Use one of the following codes for each component:

ff means full brightness.

cc means 80% brightness.

99 means 60% brightness.

66 means 40% brightness.

33 means 20% brightness.

00 means none of this color component.

For example, bright red is #ff0000, dark green is #003300, bluish-purple is #660099, and medium-gray is #999999. To make a page with a red background and dark green text, you could use the following HTML code within inline styles:

Click here to view code image

<body style="background-color:#ff0000; color:#003300">

Although only 6 examples of two-digit hexadecimal values are shown here, there are actually 225 combinations of two-digit hexadecimal values—0–9 and a–f, paired up. For example, f0 is a possible hex value (decimal value 240), 62 is a possible hex value (decimal value 98), and so on.

As previously discussed, the rr, gg, and bb in the #rrggbb hexadecimal color code format stand for the red, green, and blue components of the color. Each of those components has a decimal value ranging from 0 (no color) to 255 (full color).

So white (or #ffffff) translates to a red value of 255, a green value of 255, and a blue value of 255. Similarly, black (#000000) translates to a red value of 0, a green value of 0, and a blue value of 0. True red is #ff0000 (all red, no green, and no blue), true green is #00ff00 (no red, all green, no blue), and true blue is #0000ff (no red, no green, and all blue). All other hexadecimal notations translate to some variation of the 255 possible values for each of the three colors. The cross-browser compatible color name CornflowerBlue is associated with the hexadecimal notation #6495ed—a red value of 100, a green value of 149, and a blue value of 237 (almost all of the available blue values).

When picking colors, either through a graphics program or by finding something online that you like, you might see the color notion in hexadecimal or decimal. If you type “hexadecimal color converter” into your search engine, you will find numerous options to help you convert color values into something you can use in your stylesheets.

Figure 7.2 shows an example of color usage that could very easily go into a web design Hall of Shame. I can’t imagine ever using these combinations of colors and styles in a serious website, but it serves here as an example of how color style could be applied to various elements. The image printed in this book will likely not do justice to the horrific colors used, so be sure to open the sample file or type up the code in Listing 7.1 and load it in your browser.

Listing 7.1 shows the HTML and CSS styles used to produce Figure 7.2.

LISTING 7.1 Using Styles to Produce Background, Text, and Border Colors

Click here to view code image

---

<!DOCTYPE html>

<html lang="en">
  <head>
    <title>Background, Text, and Border Colors</title>

    <style type="text/css">
    #uglyparagraph {
       background-color:#cccccc;
       color:#ff0000;
       border:1px solid #000000;
    }
    .orange {
       color:#ffa500
    }
    #uglydiv {
       width:300px;
       height:75px;
       margin-bottom: 12px;
       background-color:#000000;
       border:2px dashed #ff0000;
       color: #ffffff;
    }
    table {
       border-width: 1px solid #000;
       border-spacing: 2px;
       border-style: outset;
       border-collapse: collapse;
    }
    .greencell {
       background-color: #00ff00;
    }
    .redcell {
       background-color: #ff0000;
    }
    .bluecell {
       background-color: #0000ff;
    }
    .yellowcell {
       background-color: #ffff00;
    }
    #uglybq {
       background-color:#0000ff;
       border:4px dotted #ffff00;
       color:#ffffff;
    }
    </style>
  </head>

  <body>
       <h1>Background, Text, and Border Colors</h1>

       <p id="uglyparagraph">Grey paragraph, black border, red text
       with an <span class="orange">orange span</span>.</p>

       <div id="uglydiv ">Black div, red border, white text. </div>

       <table>
       <tr>
       <td class="greencell">Green Table Cell</td>
       <td class="redcell">Red Table Cell</td>
       </tr>
       <tr>
       <td class="bluecell">Blue Table Cell</td>
       <td class="yellowcell">Yellow Table Cell</td>
       </tr>
       </table>

       <blockquote id="uglybq">
       Blue blockquote,  yellow border, white text.
      </blockquote>
  </body>
</html>

---

Looking at the styles in Listing 7.1, you should be able to figure out almost everything except some of the border styles. In CSS, you can’t designate borders as a color without also having a width and type. In the first example in Listing 7.1, for uglyparagraph, the border width is 1px and the border type is solid. In the example for uglydiv, the border width is 2px and the border type is dashed. In the uglybq example, the border width is 4px and the border type is dotted.

When picking colors for your website, remember that a little bit goes a long way—if you really like a bright and spectacular color, use it as an accent color, not throughout the primary design elements. For readability, remember that light backgrounds with dark text are much easier to read than dark backgrounds with light text.

Finally, consider the not-insignificant portion of your audience that might be colorblind. For accessibility, you might consider using the Colorblind Web Page Filter tool at http://colorfilter.wickline.org/ to see how your site looks to a person with colorblindness.

At the most basic level, the CSS border-radius property controls rounded corners. Any element that can have a border applied to it can also have the border-radius property applied to it. All current versions of popular browsers (including most mobile browsers) support this property.

In brief, the creation of rounded corners is dependent upon the definition of ellipses that then take the place of the previously square corner. Now, if you’re like me and you shy away from everything related to geometry, that sounds far too complicated to deal with. But if I show you that this bit of CSS defines the class used with the <div> element with rounded corners that you see in Figure 7.3, then things start to look a little brighter:

.rounded {
   background-color:#00ff00;
   border-radius: 20px;
   height: 150px;
   width: 150px;
}

You already know what the background-color, height, and width properties do, so the only new item here is the border-radius property—in this case, it has a value of 20px. The border-radius property is a shorthand property, meaning that it refers to several other properties. Much as the border property is shorthand for, or combines, the border-top, border-right, border-bottom, and border-left properties, so does border-radius combine the border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius properties.

That is to say, just like this:

border: 5px;

is equivalent to:

border-top: 5px;
border-right: 5px;
border-bottom: 5px;
border-left: 5px;

Then so is this:

border-radius: 20px

equivalent to:

Click here to view code image

border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;

Now for the tricky part: What does “20px” actually refer to? In this case, it states that the both the horizontal and vertical radii of the ellipsis that makes up each rounded corner are 20 pixels in length and height, respectively. Figure 7.4 attempts to illustrate this point.

There’s a little more shorthand going on here. Because there are two radii for each ellipsis (horizontal and vertical), you can define both of them for each ellipsis. However, if you want them both to be the same, you can use the value once. If you want the radii to be different, use something like this:

Click here to view code image

border-top-left-radius: 20px 10px;

The previous example sets a horizontal radius of 20px and a vertical radius of 10px for the top-left corner of the element.

As you might have guessed, not only can the horizontal and vertical radii for a corner have different values, but each corner can have different values as well. In other words, you can go crazy with rounded corners. Figure 7.5 shows some additional examples of rounded corners, as well as the border-radius values that were used to create them.

A. Black text on a white background is one of the most common color combinations for reading because it is the easiest way to achieve high contrast between the foreground and background colors—and high contrast means better legibility. But the bright glow of a pure white, bright monitor does bother some people, which is why most designers try to adhere to the spirit of the guideline, if not the letter of the law. That is, it is becoming more common to see a slightly off-white background color and a darker gray text color instead of pure white and pure black.

2. What CSS properties and values would you use to ensure that a paragraph had a white background, orange text, and a 3-pixel-wide dashed green border?

3. What value would you use for border-radius if you wanted both the horizontal and vertical radii to be the same—say, 45 pixels—for all four corners?

Click here to view code image

<body style="background-color:#000000; color:#00FF00">

2. The following properties and values would work:

background-color: #ffffff;
color: #ffa500;
border: 3px dashed #00ff00;

3. You can use this code:

border-radius: 45px;

When you have a set of colors—or a few options for sets of colors—create a basic HTML page with an <h1> element, a paragraph of text, and perhaps some list items. Use the color-related styles you learned about in this hour to change the background color of the page and the text of the various block-level elements, to see how these sets of colors might work together. See how they interact, and determine which colors are best used for containers and which are best used for plain text, header text, and link text.