Book HomeCascading Style Sheets: The Definitive GuideSearch this book Wednesday 10th of February 2016 10:48:20 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. sheets. This is due to the fact that they're style sheets but are external to the HTML document. (Go figure.)

In order to successfully load an external style sheet, LINK must be placed inside the HEAD element but may not be placed inside any other element, rather like TITLE or STYLE. This will cause the web browser to locate and load the style sheet and use whatever styles it contains to render the HTML document, in the manner shown in Figure 1-2.

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.

selector. This is in some ways like the child selector, but in this case, styles are applied to elements that share a parent and are next to each other in the document tree. For example:

H2 + P {color: silver;}

In the first set of markup, a paragraph immediately follows an H2, so it is silver. In the second, the element adjacent to the H2 is a UL, which does not match the rule, and neither does the paragraph right after that. Finally, even though there is text directly after the visible, as Figure 7-23 makes obvious:

B {margin-left: 10px; background: silver;}
Figure 7-23

Figure 7-23. An inline element with a left margin

Note the extra space between the end of the word just before theinline element, and the edge of the inline element'sbackground. This can end up on both ends of the inline if we wish:

B {margin: 10px; background: silver;}

As expected, Figure 7-24 shows a little extra space

Since, in this circumstance, the author's styles will outweighthe reader's styles -- that's how it is under CSS1,anyway -- then the new style sheet for this document will be asfollows (shown in Figure 6-21):

/* combined styles */BODY {color: black; background-color: black;}
Figure 6-21

Figure 6-21. Black on black

Not exactly readable, is it? Only the hyperlinks are visible, thanksto their default styles. That's why it's always a good