Book HomeCascading Style Sheets: The Definitive GuideSearch this book Saturday 23rd of August 2014 09:29: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:

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. bottom,left) -- note thecommas -- butthe CSS2 specification contains examples both with and without commasand defines rect as accepting both the comma andnoncomma versions. This text will stick to the comma version mostlybecause it makes things easier to read.

It is extremely important to note that the values for



Library Navigation Links

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

edges. The variations may seem subtle, but the odds are thatyou'll have reason to use both approaches at some point in yourdesign career.

In case you're wondering, there is no way to control the repeatany more than we've already discussed. There is norepeat-left, for example, although it couldcertainly be added in some future version of CSS. For now, you getfull tiling, horizontal tiling, vertical tiling, or no tiling at all.

Figure 7-33

Figure 7-33. Multiple border styles on a single element

Again we see the top-right-bottom-left order of values. This is justlike the ability to set different margins with multiple values. Allthe same rules aboutvaluereplication apply to border styles, just as they did with margins andpadding. Thus, the following two statements would have the sameeffect, as depicted in Figure 7-34: navbar, then you need only add this rule:

#navbar A:link {color: yellow;}

This will change the color of hyperlinks within the navigation barwithout affecting other hyperlinks throughout the document.

6.1. Colors

There is really only one type of color in CSS, and that'splain, solid color. If you set the background of a page to be the image to be raised nine pixels, instead of some other number.Without a value for line-height, it wouldn'tbe possible to perform percentage-value vertical alignments. Theheight of the image itself has no relevance when it comes to verticalalignment: the value of line-height is all thatmatters.

8.4.4.1. Adding box properties