Standard Values

• The most simple and effective way to customize a cursor using CSS is implementing one of the selection available as standard since the introduction of CSS2. Many of these are already used by default in Web pages, but only for particular, predefined functions. The hand cursor displayed when hovering over hyperlinks and the resizing arrow that appears when you hover over the corner of a window are examples of the cursors available by default through CSS.
  
  

Custom Image

• To fully customize a cursor using CSS, you can specify a link to a particular image which will appear as your cursor when you hover over the element that uses it. The image must be no more larger than 32 pixels wide and 32 pixels high, and must have a transparent background if it does not fill the whole 32-by-32 pixel area. The image must be saved in the CUR format to work in all browsers, otherwise the browser will fall back to the default cursor.
  
  

Implementing the CSS

• Place the "cursor:" property in the property list of the desired element, ID or class, followed by a value. Specifying a crosshair style cursor on your header div would appear as:
  
  .header {cursor:crosshair;}
  
  To specify your own image as the cursor for a particular element, you must use the "url" value. It is important to specify a fallback cursor in case your image does not work in a user's browser. Specifying a custom image cursor on your header div with a crosshair fallback style would appear as:
  
  .header {cursor:url('my_cursor.cur'), crosshair;)
  
  

Browser Compatibility

• As with many CSS properties, there are some cross-browser compatibility issues to keep in mind. No versions of the Opera browser support customized images using the "url" value as of the date of publication. It is only available in Safari 4 and Chrome 4 or later, Internet Explorer 6 or later and Firefox 3 or later. All versions of Firefox require a fallback cursor style if your primary style is a customized image. In other browsers, it is recommended but not mandatory.
  
  

Inheritance

• Unlike some properties in CSS, the cursor property does not inherit the value of its parent element, so a div will not use the same cursor type as the page's content wrapper. The default cursor value is always "auto," so if a cursor is not specified, the browser's standard cursor will be applied. If you want to apply the same cursor throughout the page, specify the value in the "body" element, and specify "cursor: inherit;" in every div.