CSS3 Foundations

chapter four

Creating Styles Using Property Values

So far, you’ve used a handful of properties to add styles to the page, such as background-color, background-image, and color. You learn more of these properties from Chapter 5 onward. Before that, take a look at the different types of values that can be used with properties, allowing you to apply the exact styles you want to a page.

Color Keywords

You’ve already added some colors to the page, which all made use of color keywords, like so:

#main {

    background-color: white;

}

White is one color keyword of 16 that CSS defines:

• Black

• Silver

• Gray

• White

• Maroon

• Red

• Purple

• Fuchsia

• Green

• Lime

• Olive

• Yellow

• Navy

• Blue

• Teal

• Aqua

In CSS Level 3, another 146 color keywords have been added. I don’t list them all here, but you can find them at www.w3.org/TR/css3-color/#svg-color.

  So, as those extended color keywords were introduced in CSS Level 3, does that mean they won’t work in older browsers that don’t support CSS3? Not quite. This is one of those times when CSS3 was updated to match what was already being implemented by browsers. The extended colors, known as X11 colors, are originally from another browser technology—SVG. SVG has been supported in browsers for many years, and because of that, so too have most of the extended colors. I say “most” because you may find some browsers don’t support all 146 extended ...