CSS: Values

By Richard York

CSS can become quite complex in terms of what it allows a property’s value to be. There are different types of values that CSS allows in greater detail, let’s beginning with keyword values.

Keywords

A keyword value is used to invoke a predefined function. For example, red, green, and blue are CSS keywords, red, green and blue; all have a predefined purpose. Color keywords can be used on any property that accepts a color value. Figure 2-12 shows some examples of keywords in a style sheet

The keywords in Figure 2-12 are no-repeat, fixed, and lightblue. no-repeat and fixed provide the browser with instructions for how to render the background image. lightblue is a keyword that tells the browser what color the text of hyperlinks should be.

Many types of keywords are used in CSS, and sometimes a single keyword can have different meanings depending on the element to which it is applied. The auto keyword, for example, is used by CSS to apply some default style or behavior, and its meaning depends on the way it’s used, and what property it is used with. Try the auto keyword in this example.

Try It Out-Adding auto width to a Table

Example 2-2. To see the effects of the auto keyword as applied to a

element, follow these steps.

1. Enter the following XHTML-compliant markup.

27. Save the preceding markup as Example_2-2.html, and then load it into a browser. Figure 2-13 shows width: auto; applied to the

element.

Figure 2-13

How It Works

In Figure 2-13, you can see that the table expands only enough to accommodate the text within it.

When width: auto; is applied to a

element, it invokes a different mechanism for width measurement than when it is applied to a

element. Next, see what happens when auto width is applied to a

element.

Try It Out-Applying auto width to a div

Example 2-3. To see the effects of the auto keyword as applied to a

element, follow these steps.

1. Enter the following document:

21. Save the preceding markup as Example_2-3.html. Figure 2-14 shows width: auto; applied to the
    element.

Figure 2-14

How It Works

All elements with a width property have an auto value by default, but not all elements behave the same way when auto width is applied. The

element, for instance, only expands horizontally to accommodate its data, which is a method called shrink-to-fit. A

element, on the other hand, expands horizontally as far as there is space, which is called expand-to-fit.

I’ve added a background for each element in Examples 2-2 and 2-3 so that you can see its width. The border outlines the edges of each element, showing exactly how much space each element occupies.