Styling cursor types
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link name="favicon" type="image/x-icon" href="https://skillzam.com/uploads/system/e353194f3b7cd1b75d69c3ab88041985.png" rel="shortcut icon" />
<title>Styling cursor types </title>
<style>
span {
display: inline-block;
background-color: cornflowerblue;
padding: 30px;
border: 3px solid indigo;
}
</style>
</head>
<body>
<!--
cursor : property can generate a bunch of different mouse cursors.
-->
<h1>Demo: Styling cursor types</h1>
<span style="cursor: auto">auto</span>
<br><br>
<span style="cursor: crosshair">crosshair</span>
<br><br>
<span style="cursor: default">default</span>
<br><br>
<span style="cursor: e-resize">e-resize</span>
<br><br>
<span style="cursor: help">help</span>
<br><br>
<span style="cursor: move">move</span>
<br><br>
<span style="cursor: n-resize">n-resize</span>
<br><br>
<span style="cursor: ne-resize">ne-resize</span>
<br><br>
<span style="cursor: nw-resize">nw-resize</span>
<br><br>
<span style="cursor: pointer">pointer</span>
<br><br>
<span style="cursor: progress">progress</span>
<br><br>
<span style="cursor: s-resize">s-resize</span>
<br><br>
<span style="cursor: se-resize">se-resize</span>
<br><br>
<span style="cursor: sw-resize">sw-resize</span>
<br><br>
<span style="cursor: text">text</span>
<br><br>
<span style="cursor: w-resize">w-resize</span>
<br><br>
<span style="cursor: wait">wait</span>
<br><br>
</body>
</html>