HTML & CSS: Design and Build Websites

11

COLOR

• How to specify colors
• Color terminology and contrast
• Background color

Color can really bring your pages to life.

In this chapter we will look at:

• How to specify colors, as there are three common ways in which you can indicate your choice of colors (plus extra ways made available in CSS3)
• Color terminology, as there are some terms that are very helpful to understand when it comes to picking colors
• Contrast, and ensuring that your text is readable
• Background colors for behind either your entire page or parts of a page

What you will learn about colors in this chapter will then be used in subsequent chapters when it comes to looking at colors of text and boxes in CSS.

FOREGROUND COLOR

color

The color property allows you to specify the color of text inside an element. You can specify any color in CSS in one of three ways:

RGB VALUES

These express colors in terms of how much red, green and blue are used to make it up. For example: rgb(100,100,90)

HEX CODES

These are six-digit codes that represent the amount of red, green and blue in a color, preceded by a pound or hash # sign. For example: #ee3e80

COLOR NAMES

There are 147 predefined color names that are recognized by browsers. For example: DarkCyan

We look at these three different ways of specifying colors on the next double-page spread.

CSS3 has also introduced another way to specify colors called HSLA, which you will meet ...