Book HomeCascading Style Sheets: The Definitive GuideSearch this book Wednesday 29th of June 2016 12:14:38 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.

Library Navigation Links

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

Figure 4-25

Figure 4-25. Using line-height factors to overcome inheritance problems

As I said previously, although it seems like line-height distributes extra space both above and below each line of text, it actually adds (or subtracts) a certain amount from the top and bottom of an inline element. This leads to some odd cases when a line has elements with different font sizes, but for the moment, let's stick to a simple case. Assume that the default font-size of a paragraph is 12pt and consider the following:

H2 + * {color: silver;}

The fact that user agents ignore text between elements can actually be used to your advantage in many circumstances. Take, for example, a document design in which you want STRONG text to be gray, except when it follows EM text, in which case it should be silver:

First off, there is the ability to create a selector that matches anynavigational hyperlinks along the side of the page are black on alight purple background. There are almost infinite possibilities:defining red text for warnings, using a dark purple to make boldfacedtext even more obvious, setting each heading to be a different shadeof green, and on and on.

Of course, this means that when you're designing a page, youneed to put some thought into it first. That's generally truein any case, but with colors, it's even more so. For example,if you're going to set all hyperlinks to be yellow, will that