fbpx
April 3, 2020
css cursor
CSS

CSS CURSOR | Learn How To Style Cursors on Web Page Using CSS

In this tutorial we will be discussing about CSS cursors and how you can style them using CSS properties. In our previous tutorial we discussed about CSS paddings and we learnt how to add and style padding on our web pages. If you haven’t gone through the tutorial you can do so using the link below

Read previous tutorial on: CSS PADDING | Learn How To Add Beautiful List To Web Page Using CSS

CSS CURSOR

CSS allows developers to setup the mouse cursor appearance that shows up on our web page. We can also set up different cursor display on different sections of our web page. Whenever a user scrolls or hovers over an element on the web page the cursor style assigned will be displayed. We can set the cursor using the cursor property. This property accepts different values for different cursor displays and this values are shown below

  • auto – the cursor display depends on the section of the web page hovers over
  • default – this sets the cursor display to arrow as default
  • pointer – This sets the cursor to a hand pointer
  • crosshair – this sets the cursor display to crosshair or plus sign
  • move – this shows up the drag display
  • e-resize – with this the cursor specifies that the edge of the object is to be moved right
  • ne-resize – with this the cursor specifies that the edge of the object is to be moved up and right
  • nw-resize – with this the cursor specifies that the edge of the object is to be moved up and left
  • n-resize – with this the cursor specifies that the edge of the object is to be moved up
  • s-resize – with this the cursor specifies that the edge of the object is to be moved down
  • sw-resize – with this the cursor specifies that the edge of the object is to be moved down and left
  • se-resize – with this the cursor specifies that the edge of the object is to be moved down and right
  • nesw-resize- with this the cursor specifies that the edge of the object is to be moved in any direction
  • text – this shows up the i bar
  • wait – this shows up the hour glass
  • help – this shows up the question mark symbol
  • <url> – this is used to link an image to the cursor display

Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   
   <title>Illustration of cursor property</title>
</head>
<body>

   <p style="cursor: auto;"> 
      Auto
   </p>

   <p style="cursor: move"> 
      move
   </p>

   <p style="cursor: default;"> 
      Default
   </p>

   <p style="cursor: pointer;"> 
      pointer
   </p>

   <p style="cursor: crosshair;"> 
      crosshair
   </p>

   <p style="cursor: e-resize;"> 
      e-resize
   </p>

   <p style="cursor: ne-resize;"> 
      ne-resize
   </p>

   <p style="cursor: nw-resize"> 
      nw-resize
   </p>

   <p style="cursor: n-resize;"> 
      n-resize
   </p>

   <p style="cursor: nesw-resize"> 
      nesw-resize
   </p>

   <p style="cursor: se-resize"> 
      se-resize
   </p>

   <p style="cursor: sw-resize"> 
      sw-resize
   </p>

   <p style="cursor: s-resize"> 
      s-resize
   </p>

   <p style="cursor: wait"> 
      wait
   </p>

   <p style="cursor: help"> 
      help
   </p>
   <p style="cursor: text"> 
      text
   </p>
</body>
   
</html>

Result

please move your cursor on the text below. You will get to the see the cursor effects

Illustration of cursor property

Auto

move

Default

pointer

crosshair

e-resize

ne-resize

nw-resize

n-resize

nesw-resize

se-resize

sw-resize

s-resize

wait

help

text

conclusion

The CSS cursor properties listed above are needed when styling your cursor on a web page. A good understanding of this cursor properties will enable you make good web page cursor formatting and structure. Lets move on to the next topic on CSS DIMENSIONS

Leave a Reply

Your email address will not be published. Required fields are marked *