Using a custom mouse cursor using CSS

 If you can change the cursor on PC, how about it online. You dont need a .cur file. Using a image file works too. Here is how.

1. Creating the cursor image file

Skip this step if you decided to use a .cur file. 

You will need photo editing software like Photoshop.

1. Take a screenshot of a cursor 
2. Put it in the photo editing software
3. Remove the background
4. Crop it into squares.
5. Resize it into 32x32 pixels.
6. Put the cursor in the top-left of the square.
7. The image will look like this:
   
   
   
   Cursor image in 32x32px
   
   

Now that the cursor is ready, you can apply it to a website.

2. Applying the cursor to the website

1. Make a file called style.css
2. In the file make this line of code. 

body {

}

3. Inside the {}, Put this code: cursor: url('pathtocursorfile.cur'), default; Replace pathtocursorfile.cur with the file path to the cursor file like /cursor/main.cur or /cursor/main.cur.
4. Add this code inside the head tags: <link rel=stylesheet href='style.css'>
5. Done! 

Now if you want to make it change only when hovering it to a text box, do this steps.

1. Repeat steps 1 and 2
2. Replace body into textarea in the CSS file
3. In the HTML file, create a text box using the textarea tag.

Now were done! so I'm gonna use a custom cursor to this blog! So long...