Book HomeCascading Style Sheets: The Definitive GuideSearch this book Monday 20th of October 2014 11:07:56 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.

<LINK REL="stylesheet" TYPE="text/css" HREF="sheet1.css" TITLE="Default">

First we consider the use of the LINK tag. The LINK tag is a little-regarded but nonetheless perfectly valid tag that has been hanging around the HTML specification for years, just waiting to be put to good use. Its basic purpose is to allow HTML authors to associate other documents with the document containing the LINK tag. CSS1 uses it to link style sheets to the HTML document; in Figure 1-2, a style sheet called sheet1.css is linked to the

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.

P {padding: 10%; background-color: silver;}<DIV STYLE="width: 200px;"><P>This paragraph is contained within a DIV which has a width of 200 pixels,so its padding will be 10% of the width of the paragraph's parent element.Given the declared width of 200 pixels, the padding will be 20 pixels onall sides.</P></DIV><DIV STYLE="width: 100px;"><P>This paragraph is contained within a DIV with a width of 100 pixels,
case where the element being positioned is a child of the
BODY element, e.g., a paragraph or heading
element. With the right styles, the containing block for the
positioned element will be the entire BODY
element. Thus, applying the following styles to the
BODY and the fifth paragraph in a document would
lead to a situation similar to that shown in Figure 9-20:

BODY {position: relative;}
<P STYLE="position: absolute; top: 0; right: 25%; left: 25%; bottom: auto;paragraph and still have the result depicted in Figure 9-21.

Figure 9-21

Figure 9-21. Setting a "change bar" with absolute positioning

However, maybe we'd like to place the change marker next towhatever line was changed. In that case, we need to make only onesmall alteration to our styles, and we'll get the result shownin Figure 9-22:

SPAN.change {position: absolute; top: static-position; left: -5em; width: 4em;font-weight: bold;}
For example, top  describes how far the outer top edge
of the positioned element should be placed from the top of its
containing block. In the case of top, positive
values move the top edge of the positioned element
downward, while negative values move it
above the top of its containing block.
Similarly, left  describes how far to the right (for
positive values) or left (for negative values) the outer left edge of
the positioned element is from the left edge of its containing block.
Another way to look at it is that positive values cause inward