3.1. Colors

Ofcourse, the one thing that almost every beginning web author wants toknow is, "How do I set colors on my web page?" UnderHTML, there were two choices: use one of a small number of colorswith names, like red or purple,or employ a vaguely cryptic method using hexadecimal codes. Well,both of those methods for describing colors can be found in CSS, as Book HomeCascading Style Sheets: The Definitive GuideSearch this book Saturday 30th of May 2015 12:05:05 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.

just as with any other element. This can make them very useful for the creation of sidebars, "sticky notes," and other such effects. One example is the ability to set a "change marker" on any paragraph that has been edited. This could be done using the following styles and markup:

SPAN.change {position: absolute; top: 0; left: -5em; width: 4em;
font-weight: bold;}
P {margin-left: 5em; position: relative;}
effort to boost sales, the editors want to put a few articles online
each month.

TIP

This case study ends up using quite a few advanced styles and, as such, may be beyond the capabilities of most older user agents. It's still very instructive, even on a theoretical level, and it should work in a browser that fully and correctly supports CSS1. Just be prepared for one or more errors if you try this in a web browser. You may wish to follow along one step at a time, reloadingrange of effects possible in document design. For example,let's say you want a triple border on the left side of each H1element in your document. You could then declare the following:

H1 {background-image: url(triplebor.gif); background-repeat: repeat-y;}

As we can see in Figure 6-34, the very small imagetriplebor.gif is repeated vertically along theleft side of the heading element, resulting in an effect thatisn't otherwise possible.