Book HomeCascading Style Sheets: The Definitive GuideSearch this book Sunday 26th of October 2014 03:52:21 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.

overall, no significant changes in the document's presentation.We can be quite pleased with the results -- and better still,management will never notice the difference.

The advantages of the new design are twofold: the ability to changecolors and fonts by editing a small number of styles instead of abunch of FONT tags and a reduction insize of theHTML source itself. In a case like this, a page's size canshrink by several kilobytes -- and in cases where a heavily



Library Navigation Links

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

Eventually, though, one comes to realize that setting a single colorfor all of the text in a page just isn't enough. That'show<FONTCOLOR="..."> came into being. Without it, youwouldn't be able to have pages where some text is black, somered, and some white, for example.

Now, thanks to the power of CSS, you can have many, many differentcolors within a single page, and without using a single does not interrupt the counting in ordered lists. Thus, the followingmarkup would have the result shown in Figure 7-80:

OL LI {list-style-type: decimal;}LI.off {list-style-type: none;}<OL><LI>Item the first<LI CLASS="off">Item the second<LI>Item the third<LI CLASS="off">Item the fourth

7.3.2. Percentages and Margins

As stated earlier, it's possible to set percentage values for the margins of an element. Percentages are computed in relation to the width of the parent element, so they change if the parent element's width changes in some way. For example, assume the following, shown in Figure 7-10:

Figure 7-10

Figure 7-10. Parent widths and percentages

While this is interesting enough, consider the case of elements without a declared width, whose overall widththe fact that the image is contained with a hyperlink, and theforeground color of hyperlinks is usually blue. Ifwe so desired, we could change that color to besilver, like this:

A:link IMG {border-style: outset; color: silver;}

As Figure 7-32 shows, the border is now based on thelight gray silver, since that's now theforeground color of the image -- even though the imagedoesn't actually use that color, it's still passed on to