Chapter 39. User Interface Styles
IN THIS CHAPTER
Changing the cursor
User interface colors
User interface fonts
In Part III of this book you learned how to use CSS to style and format almost every part of an HTML document. However, there are several additional, user agent-related elements you can use styles to manipulate. This chapter shows you how to use styles on user interface elements — the mouse pointer, system colors, and system fonts.
Changing the Cursor
The CSS cursor
property allows you to specify what cursor should be displayed when the cursor is over a specific element. This property is used like any other property, with a familiar format:
cursor: value;
The cursor
property supports the values listed in Table 39-1.
The uri
value takes the following familiar form:
url("uri_path_to_resource")
This value is unique in that it supports several values and can be followed by a default value if none of the uri
resources can be found or used. For example, the following property definition defines two external pointer files that should be used and a fallback default of crosshair
if those two resources cannot be used for some reason.
cursor: url("angle.cur"), url("simple.cur"), crosshair;
Table 39-1. Values for the Cursor Property
Value | Meaning |
---|---|
auto | The user agent displays an appropriate cursor for the current context. |
crosshair | The cursor is set to the shape of a simple crosshair (resembling a narrow + sign). |
default | The cursor is set to the platform's default cursor (typically an arrow). |
pointer |
Get HTML, XHTML, and CSS Bible, Fourth Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.