Using Basic Selectors - Beginning CSS3 - page 31

Figure 2-6. The style rule changes the look of the cursor

You can also use your own custom image for a cursor by setting the location of the image file as the value of
the cursor property. When specifying a custom cursor, you can list fallback options as a comma-separated list
like this:
cursor: url(images/awesome.cur), url(images/awesome cursor.png), pointer;

Browsers attempt to display the first value that they can support. For example, if a browser doesn't support
images with a .cur filename extension, it tries to use the next one. If it can't support that one either, it falls back to
the keyword listed at the end.

■ Changing a fundamental aspect of the browser such as the cursor can disorient users. But it might be
appropriate in situations such as online games.

Caution

In CSS3, you can optionally add two space-separated numbers after the file to represent the precise position
that is being pointed to. The first number specifies the horizontal offset (in pixels) from the top-left corner of the
image. The second number specifies the vertical offset. For example, if your cursor image is 24 pixels square, and
you want it to be centered over the position being pointed to, you specify the coordinates like this:

cursor: url(images/bullseye.cur) 12 12, url(images/bullseye.png) 12 12, default;
If you don't specify any offsets, the position being pointed to is at the top-left corner of the image.

■ Note The syntax for specifying file locations is explained in Chapter 3

Using Class Selectors
As noted earlier, you create a class selector by prefixing the class name with a period (dot). So, the selector for the
intro class in basic.html is .intro . For example, you can use a class selector like this:
.intro {
/* Styles that affect all elements with the intro class */
}

You can also use a class selector in a descendant selector like this:
.intro a:link {
/* Styles that affect unvisited links in elements with the intro class */
}

You can prefix the class selector with another selector to target elements precisely, for example:

p.intro {
/* Styles for paragraphs with the intro class */
}