Lesson 2: Applying Color in CSS

Overview

In the previous unit you selected a color scheme for a fictitious client. Now it's time to select one for your own portfolio site, and apply it using CSS.

To apply color using CSS, it's important to know how colors are expressed in CSS. Many colors can be expressed using their english names. HTML 4.01 defined sixteen standard color names (aqua, black, blue, fuchsia, gray (or grey), green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow that all browsers support. Most browsers today support standard names for many more colors, all listed and shown on the HTML Color Names page from W3Schools, as well as on the Web Colors page on Wikipedia.

Using color names is handy and easy to understand, but most computer screens today are capable of displaying over 16 million colors. It would be impossible to name all those. So instead, we identify them using a hex triplet. A hex triplet is a six-digit number, where each pair of digits represents (in order) the value of red, green, and blue. Each pair of digits is a hexadecimal number (base 16), where 00 is the lowest value and FF is highest. Using this system, colors are formed by mixing various amounts of red, green, and blue. Here are some examples:

When using tools like the Color Scheme Designer, ColorBlender, HTML Color Picker from W3Schools, or the VisiBone Webmaster's Color Lab, the colors you select are expressed as hex triplet (possibly in addition to other formats). To add these colors to your web site, simply copy and paste them (or write them down) into your CSS file.

To keep track of all the colors in your color scheme, it can be helpful to add them to a comment at the top of your external CSS file. Comments are notes from the author or developer, marked up in such a way that browsers know to ignore them. All markup or programming languages have comments, but they have different tags for marking up the start and end of comments. Earlier you learned that comments in HTML are contained between <!-- and -->. In CSS, comments are contained between /* and */. Here's an example of a comment section in CSS:

  /*
    Color scheme for this website:
     #4312AE
     #472B83
     #280671
     #7446D7
     #8E6DD7
  */

Learner Outcomes

At the completion of this exercise:

Activities

  1. Repeat the activity from the previous lesson, but do so for your own portfolio site. Consider your target audience (does include potential employers? if so, who are they?). Decide how you want to present yourself to this audience, and choose an appropriate color scheme.
  2. In your text editor, open the external style sheet you created in a recent lesson. Also open your portfolio home page in a web browser. Each time you make a change to your external style sheet, save it and refresh your home page in the browser to see the results of your change.
  3. Add each of the color values of your color scheme to a comment at the top of your CSS file.
  4. Apply your color scheme to your website by using some of the colors to define either the color (color of the text) or the background-color of various elements. If you apply a background color, be sure the color of the text that appears on that background has enough contrast. For maximum contrast in most color schemes, if the background-color is a light color, the color of the text should be black; and if the background-color is a dark color, the color of the text should be white.

Handouts/Online Documents

All done?

After you have implemented your color scheme and are satisfied with the results, be sure to save the final changes to your external CSS file. Show your instructor your results before starting the next module.