Book HomeCascading Style Sheets: The Definitive GuideSearch this book Sunday 29th of November 2015 03:03:10 PM

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 parent element's text shows through the positioned element. Theonly way to avoid this is to set a background for the positionedelement.

Note that the boldface element in this case is positioned in relationto its parent element's content box, which defines itscontaining block. Without the relative positioning of the parentelement, the containing block would be another element. Consider acase where the element being positioned is a child of theBODY element, e.g., a paragraph or heading 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:

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.


[ <length> | <percentage> ]{1,4}


Percentage values refer to the width of the parent element.

As you can see, this property accepts any length value or a

This should cause older browsers to completely ignore not only theSTYLE tags but the declarations as well, becauseHTMLcomments are not displayed. Meanwhile, those browsers that understandCSS will still be able to read the style sheet.


There is one drawback to this strategy. A few versions of olderbrowsers, such as very early versions of Netscape Navigator and NCSA

In the first set of markup, a paragraph immediately follows anH2, so it is silver. In the second, the elementadjacent to the H2 is a UL,which does not match the rule, and neither does the paragraph rightafter that. Finally, even though there is text directly after thethird H2, it isn't part of an element, sothe paragraph right after the text matches the rule and is coloredsilver. All this is demonstrated in Figure 10-5.

Figure 10-5

Figure 10-5. Selecting adjacent elements

You are almost certainly acquaintedwith the concept of floated elements. Ever since Netscape 1.0, it hasbeen possible to float images by declaring, for instance,<IMG SRC="b5.gif"align="right">. This causes an image to floatto the right, and allows other content (text or other images) to"flow around" the image. In the past, this was onlypossible with images and, in some browsers, tables. CSS, on the otherhand, allows any element to float, from images to paragraphs tolists. In CSS, this behavior is accomplished using the property