How to Customize your Cursor with CSS Code

Contributor

By eHow Contributing Writer

Article Rating: (5 Ratings)

You can make your own your mouse cursor for MySpace, Xanga, Friendster or your website.

Cascading Style Sheets (CSS) is a powerful Web development technology that you can use to customize the mouse cursor for your MySpace, Xanga or Friendster page or your website. It is used to control the style and presentation of a website, particularly to define the font, color, layout and other features of a site. CSS is an invaluable time-saver, as it allows you to determine these features in one single style sheet, rather than having to create HTML code for every instance that it is required. You can also use CSS to create and customize your mouse cursor icon by simply inputting the proper CSS code into your HTML field. With CSS, you can create a wide range of effects, as the cursor is modified based on the particular conditions defined by the code.

Difficulty: Moderate

Instructions

Step 1

Use the following codes to display the desired cursor effects in the html code described in the steps that follow:{cursor:default}: Regular mouse cursor{cursor:wait}: Hourglass or other icon to show the PC "thinking"{cursor:crosshair}: displays a cross-hair icon{cursor:text}: displays an "I" shaped icon when text is being selected{cursor:pointer}: Displays a pointing hand icon{cursor:help}: Help (Usually displays a question mark){cursor:hand}: Hand{cursor:move}: Move{cursor:n-resize}: Resize north{cursor:ne-resize}: Resize northeast{cursor:e-resize}: Resize east{cursor:se-resize}: Resize southeast{cursor:s-resize}: Resize south{cursor:sw-resize}: Resize southwest{cursor:w-resize}: Resize west{cursor:nw-resize}: Resize northwest{cursor:not allowed}: Not allowed{cursor:all-scroll}: All-scroll
Step 2

Use this html code to change the style of your cursor when it hovers over a link. Replace "value" with the desired cursor effect from Step 1:<head><style type="text/css"></style></head>
Step 3

Change the cursor style for the entire page with the code below. Replace "value" with the desired cursor effect from Step 1:<html><head><style type="text/css">body {cursor:value}</style></head>
Step 4

Change the cursor style for a particular section of the page with the code below. Replace "value" with the desired cursor effect from Step 1:<html><head><style type="text/css">.xlink A{cursor:value}.hlink A{cursor:value}</style></head>
Step 5

Hover or mouse-over a link to see what your mouse cursor will change to.

How to Customize your Cursor with CSS Code

Post a Comment

Related Ads