Applying Color in CSS

1. Applying Color in CSS Web Design – Sec 4-5 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials

2. Objectives • The student will • be able to identify two methods for expressing color in CSS. • be able to identify a few basic colors, including black and white, by their hexadecimal codes • be able to implement a color scheme on a web site using CSS to define background and font colors for HTML elements.

3. Expressing Colors in CSS • Color Names:

4. There are now 140 named colors in HTML • http://www.html-color-names.com/color-chart.php

5. Expressing Colors in CSS • Hex Triplet: • Using color names is handy and easy to understand, but most computer screens today are capable of displaying over 16 million colors. • 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.

6. Expressing Colors in CSS • Each pair of digits is a hexadecimal number (base 16), where 00 is the lowest value and FF is highest. • Here are some examples: • #FF0000 has the maximum amount of red, but no green or blue (result: red) • #800080 mixes a lot of red, no green, and a lot of blue (result: darkish purple) • #000000 has no color (result: black) • #FFFFFF has maximum amounts of all colors (result: white)

7. Rest of Today • You need to choose a color scheme for your web site. You need to set the following colors: • Use Color Scheme Designer to create a color scheme. • See the homework for additional instructions.

8. Other CSS Settings • Consider adding these settings to your CSS file: