Book HomeCascading Style Sheets: The Definitive GuideSearch this book Sunday 23rd of November 2014 07:56:06 AM

10.5. Adapting to the Environment

CSS2 offers the ability to both alter the browser's environment and integrate its look more closely to that of the user's operating system.

10.5.1. Cursors

To achieve the former, we have the cursor property, which lets you declare what shape the browser's cursor will take as it passes over a given element. Want to make a humorous point about download times? Change the cursor to the wait cursor (an hourglass or watch) when the cursor passes over hyperlinks. You can even hook this property up to "cursor files" (which are not defined by the specification), so you could theoretically class your anchors based on where they go and load different icons for each type of link. For example, off-site links could cause the cursor to change into a globe, while links intended to provide help could trigger a question-mark cursor.

10.5.2. Colors

In order to let web pages more closely match the user's desktop environment, there are a whole list of new color keywords like button-highlight, three-d-shadow, and gray-text. These are all intended to use the colors of the user's operating system. In all, there are 27 of these new color keywords. I won't list them all out here, but they're listed in Table 10-1, found at the end of this chapter.

10.5.3. Outlines

While you're moving your cursor around, you might want to show where the focus is set. For example, it might be nice to define a button so that it gets a red box around it when the cursor moves over it. Well, there a number of outline properties, including outline, outline-color, outline-style, and outline-width. To use the example of a red box, you might declare:

P {color: maroon;}EM {color: #999999;}
Figure 6-9

Figure 6-9. Different colors for different elements

Thanks to the inheritability of color, it's theoretically possible toset all of the ordinary text in a document to be a color such as redby declaring BODY {color:red;}. This should cause all text which is not otherwisestyled (such as anchors, which have their own color styles) to bered. This should not affect elements such as horizontal rules (HR ) or images. However, early versions of

IMG.button:hover {outline: solid red 1px;}

This should have the effect described. The outline styles could also be used to set a visible outline for regions in a client-side image map.



Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.

8.4.2.1. Generating a line box

Here are the steps a user agent has to go through in order to generate a line box. First, for each inline nonreplaced element (or string of text outside of an inline element), the font-size is used to determine the initial content-height. Thus, if an inline element has a font-size of 15px , then the content-height starts out as 15px .

P {background-color: gray;}
Figure 6-14

Figure 6-14. Background gray for paragraphs

If you wish the color to extend out a little bit from the text in theelement, then you need only add some padding to the mix, with theresult shown in Figure 6-15:

P {background-color: gray; padding: 10px;}
Figure 6-15

Figure 6-15. Backgrounds and padding

(Padding will be discussed in detail in Chapter 7, "Boxes and Borders".)

The background color of just about any element can be set, from of headings with a wavy pattern, or with little dots. You can evenfill in the cells of tables with patterns to make them distinct fromthe rest of the page, as shown in Figure 6-25:

TD.nav {background-image: url(darkgrid.gif);}
Figure 6-25

Figure 6-25. Setting a background image for a table cell

You could even, in theory, apply images to the background of replacedelements like TEXTAREAs andSELECT lists, although user agents aren'tvery good about that sort of thing yet -- in fact, as of this

TIP

The description of offsetting the outer edges is based on an erratum. The original CSS2 specification actually says that the content edges are offset, but it has been widely agreed that this is a serious error, and in fact, readings of other parts of the specification show that it is the outer edges that are offset.

The implication of offsetting the outer edges of a positioned element is that everything about an element -- margins, borders, padding,