Even though most users don't pay too much attention to the look of the mouse cursor, it is still important to use the right property value while designing it. In this topic, you will learn about different property values that you can apply to the mouse cursor. Along with the property value, there is an example picture, as well as a description of the best usage practice. Let's get started.
The CSS Cursor
The cursor is a CSS property that controls how the mouse will look when it passes over a particular element to which the property is applied. This property is used when designing the User Interface(UI). Cursor design informs users about the actions they can perform on a specific element. These actions include increasing, decreasing, helping, selecting the text, clicking on a link, etc. For example, let's say the page is loading, and it's taking quite some time. The user needs to know that the page is loading, otherwise, the user might think that there is another problem causing the waiting time. In this case, the best practice is to apply wait property, and this is how you do it:
body{
cursor: wait;
}The code output:
Property values
Let's look at the cursor property's values. For better understanding, we will divide them into different categories: general, links & status, selection, drag & drop, resizing and scrolling, and zooming. With each value, we will provide an example picture.
Conclusion
In this topic, you've learned how to style the mouse cursor with the CSS property cursor. You learned about different property values and the best situations to apply them. Let's put it to the test.