Custom and Available Cursors using CSS

This CSS code defines custom and available cursor styles for web elements. It allows you to set various cursor styles, such as 'alias,' 'crosshair,' 'pointer,' and more, to enhance the user experience on a webpage. The custom cursor style is defined using an image ('custom.png') and falls back to the default 'auto' cursor.

/* Custom Cursors
   Read more: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor */

.custom {
   cursor: url(custom.png), auto;
}

/* Available Cursors
   Read more: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor */

.alias {
    cursor: alias;
}
.all-scroll {
    cursor: all-scroll;
}
.auto {
    cursor: auto;
}
.cell {
    cursor: cell;
}
.col-resize {
    cursor: col-resize;
}
.context-menu {
    cursor: context-menu;
}
.copy {
    cursor: copy;
}
.crosshair {
    cursor: crosshair;
}
.default {
    cursor: default;
}
.e-resize {
    cursor: e-resize;
}
.ew-resize {
    cursor: ew-resize;
}
.help {
    cursor: help;
}
.move {
    cursor: move;
}
.n-resize {
    cursor: n-resize;
}
.ne-resize {
    cursor: ne-resize;
}
.nesw-resize {
    cursor: nesw-resize;
}
.no-drop {
    cursor: no-drop;
}
.none {
    cursor: none;
}
.not-allowed {
    cursor: not-allowed;
}
.ns-resize {
    cursor: ns-resize;
}
.nw-resize {
    cursor: nw-resize;
}
.nwse-resize {
    cursor: nwse-resize;
}
.pointer {
    cursor: pointer;
}
.progress {
    cursor: progress;
}
.row-resize {
    cursor: row-resize;
}
.s-resize {
    cursor: s-resize;
}
.se-resize {
    cursor: se-resize;
}
.sw-resize {
    cursor: sw-resize;
}
.text {
    cursor: text;
}
.vertical-text {
    cursor: vertical-text;
}
.w-resize {
    cursor: w-resize;
}
.wait {
    cursor: wait;
}