HTML and CSS Reference
In-Depth Information
Because
display
relates to structure, it is covered in Chapter 9.
cursor
Initial value:
auto
| Inherited: Yes | Applies to: All | CSS2.1
Browser support: IE 4+, Firefox 1+, Chrome 1+, Opera 7+, Safari 1.2+
The
cursor
property allows you to change the type of cursor displayed when hovering over an element. The initial
value of
auto
means the user agent stylesheet determines the cursor.
Changing the cursor is a great way to show users how they can interact with a particular element.
1.
In styles.css, find the rule set for
input[type=”submit”][class=”button”]
and add the follow-
ing declaration:
cursor: pointer;
}
2.
Save styles.css.
Now, when you hover over the Sign Up button in the newsletter box, the cursor changes to a pointer, letting the user
know the button can be clicked.
The look of the cursors differs based on the operating system they are being viewed on. The following values can be
used:
crosshair
,
default
,
pointer
,
move
,
e-resize
,
ne-resize
,
nw-resize
,
n-resize
,
se-
resize
,
sw-resize
,
s-resize
,
w-resize
,
text
,
wait
,
help
, and
progress
.
If these cursors don't take your fancy, you can also use the
url()
function (as you did with the
background-
image
property) to use a custom cursor.
outline (Shorthand)
Browser support: IE 8+, Firefox 1.5+, Chrome 1+, Opera 7+, Safari 1.2+
You applied styles in Chapter 3 to give every element that has focus an outline. Giving elements an outline is import-
ant for accessibility. Assume a visitor to your web page can't use a mouse (he may have a disability that prevents
him from doing so or, quite simply, the batteries in his mouse ran out). To browse your web page, that user needs to
use his keyboard. To move between elements of a web page using a keyboard, you can use the Tab key. With each
press of the Tab key, starting from the top left of the page, elements are given an outline style, which lets the user
know where on the page he is.
Because this is an important property that aids navigation, many browsers have this style built in to their default
styles via the user agent stylesheet. If you want to change those default styles, you can use the
outline-color
,
outline-style
, and
outline-width
properties.
Do those property names ring a bell? That's right; they work in the exact same way as
border-color
,
border-
style
, and
border-width
. You can use the shorthand
outline
in the same way as the shorthand
border
too!
