How to style mouse curser in CSS?

Mouse cursor

Everyone knows how does a basic mouse cursor look like, but cursor has much more properties which can be applied with CSS cursor properties. CSS cursor property is used when a curser or mouse pointer moves over a certain area, certain text or over a certain link. The following mouse pointers properties are used in CSS cursors.

a:hover{cursor:default;}

a:hover{cursor:pointer;}

a:hover{cursor:text;}

a:hover{cursor:wait;}

a:hover{cursor:help;}

a:hover{cursor:progress;}

a:hover{cursor:crosshair;}

a:hover{cursor:url(“custom.cur”), default;}

a:hover{cursor:move;}

Let us now write a code for some of cursor properties to check its different shapes while moving pointer over text. You can copy code and paste it in a notepad and then open with browser.

<!doctype html>
   <head>
   <style>
   #thin:hover{
	  cursor:default;
	  }
   #medium:hover{
	  cursor:pointer;
	  }
    #thick:hover{
	  cursor:text;
	  }
    #value:hover{
	  cursor:wait;
	  }
    #move:hover{
	  cursor:move;
	  }
   </style>
   </head>
   <body>
      <p id="thin">
         The first para with default cursor.
      </p>
      <p id="medium">
         The second para with pointer cursor.
      </p>
      <p id="thick">
         The third para with text cursor.
      </p>
      <p id="value">
         The fourth para with wait cursor.
      </p>
	<p id="move">
         The fourth para with move cursor.
      </p>
   </body>
</html> 

You may also like to learn these posts

How to style tables with collapse-separate-caption in CSS?

How to set margin properties in CSS (cascading style sheet)?