Module 2: Color in CSS

Overview

This is the first of four modules in which contents are organized into two parts. The first part is labeled with the verb "Understanding" (in this case, "Understanding Color in CSS") and the second part is labeled with the verb "Applying" ("Applying Color in CSS"). The current module builds on color theory principles that were taught in Unit 1 Module 2.

Lesson 1: Understanding Color in CSS

• Estimated time required: 60 minutes
• Link to student Lesson 1 page

Tips for Delivering This Lesson

• In this lesson students are offered a choice of using either Color Scheme Designer or ColorBlender. These sites have different interfaces for accomplishing the same task (designing a color scheme). Students should explore both sites and be encouraged to use whichever site works best for their needs and preferences. Instructors should be sure they're familiar with these tools prior to class, and can demonstrate how to use them before letting students free to experiment on their own.
• Although we believe it's generally a good idea whenever possible to offer a choice of tools, Color Scheme Designer may be the more desirable choice because (as of August 2012) it has no ads and it includes an Export link at the top of the page that can be used to export students' final color scheme to HTML + CSS. See the next Lesson for additional tips on using the Export feature.
• It might also be beneficial to have students define each color in the palette by its purpose, e.g., main text, main background, highlighting, navigation.
• Students are asked to show their color scheme to their instructor and explain why they feel this color scheme is right for their client. If time permits you can conference informally with each student at their monitor. An alternative approach would be for students to hand in (or send by email) a list of colors, defined by purpose as recommended in the proceeding item, along with their rationale for choosing that color scheme.
• Other similar tools are listed below. Note that some tools require mouse use. If you or one of your students are unable to use a mouse, consider using a tool that can be operated entirely by keyboard (e.g., using the tab key)

Color Tools

• Color Scheme Designer
• ColorBlender
• W3Schools Color Picker
• Visibone Webmaster's Color Lab

Lesson 2: Applying Color in CSS

• Estimated lesson length: 60 minutes
• Estimated time required: 60 minutes

Tips for Delivering This Lesson

• In this lesson students must select colors for their portfolio website using one of the available color sites. They must then transfer those colors to their external CSS file. If students type slowly or have problems with typing accuracy, it might be best to copy and paste color codes rather than type them.
• If students are using Color Scheme Designer another option for transferring color codes is to use the Export feature. If doing so, we recommend that you walk them carefully through how to do so. This feature displays students' color scheme on a web page, and the color codes are contained within the <style> section of the source code. This page can be saved for future reference, which is handy. However, if students view the source code they might find the CSS to be confusing since it uses CSS classes, and those aren't covered until Module 5. That said, it's a well-coded web page that uses CSS to stylize an HTML table. Advanced students could learn a lot by studying this code.

Example Output

When this lesson is complete, students will have applied a color scheme to the site by changing the external CSS file. These changes should be visible on any web page within their site, including index.html.