HTML and CSS Reference
Because display relates to structure, it is covered in Chapter 9.
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-
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.
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