Teachnique
      CourseRoadmaps
      Login

      IntroductionSyntaxSelectorsInclusionMeasurement UnitsColorsBackgroundsFontsTextImagesLinksTablesBordersBorder BlockBorder InlineMarginsListsPaddingCursorOutlinesDimensionScrollbarsInline BlockDropdownsVisibilityOverflowClearfixFloatArrowsResizeQuotesOrderPositionHyphensHoverDisplayFocusZoomTranslateHeightHyphenate CharacterWidthOpacityZ-IndexBottomNavbarOverlayFormsAlignIconsImage GalleryCommentsLoadersAttr SelectorsCombinatorsRootBox ModelCountersClipWriting ModeUnicode-bidimin-contentAllInsetIsolationOverscrollJustify ItemsJustify SelfTab SizePointer EventsPlace ContentPlace ItemsPlace SelfMax Block SizeMin Block SizeMix Blend ModeMax Inline SizeMin Inline SizeOffsetAccent ColorUser Select

      GridGrid LayoutFlexboxVisibilityPositioningLayersPseudo ClassesPseudo Elements@ RulesText EffectsPaged MediaPrintingLayoutsValidationsImage SpritesImportantData Types

      TutorialRounded CornerBorder ImagesMulti BackgroundColorGradientsBox ShadowBox Decoration BreakCaret ColorText ShadowText2d transform3d transformTransitionAnimationMulti columnsBox SizingTooltipsButtonsPaginationVariablesMedia QueriesFunctionsMath FunctionsMaskingShapesStyle ImagesSpecificityCustom Properties

      IntroductionViewportGrid ViewMedia QueriesImagesVideosFrameworks

      Questions and AnswersQuick GuideReferencesColor ReferencesWeb browser ReferencesWeb safe fontsUnitsAnimation

      PX to EM converterColor Chooser & Animation

      Useful ResourcesDiscussion

      Feedback

      Submit request if you have any questions.

      Course
      Cursor

      CSS Tutorial

      This CSS tutorial is designed for beginners to navigate through the essentials and intricate aspects of CSS styling. Upon finishing this tutorial, participants will possess a comprehensive understanding of CSS, setting a solid foundation for further exploration and mastery. This guide aims to equip you with the skills necessary to transform your visions into visually appealing web designs, laying the groundwork for your journey towards becoming an accomplished web designer.

      cursor

      The CSS cursor property determines the appearance of the mouse cursor when hovering over an element to which this property is applied. This property is only applicable in environments with mouse and cursor functionality. Its main purpose is to improve usability by visually representing certain functions.

      Possible Values

      The cursor property can have following values:
      • <url>: (optional) You have the flexibility to use a series of url() values separated by commas, with each url() pointing to an image file.
      • <x> <y>: (optional) You have the option to specify x and y coordinates that define the hotspot of the cursor and specify the exact position within the cursor image that the cursor points to.
      • <keyword>:A keyword value is required that specifies either the cursor type to use or the alternate cursor to use if none of the specified symbols can be loaded.
      The following table lists the available keywords.
      Category
      Value
      Example
      Description
      General
      auto
      
      The displayed cursor is determined by the user agent based on the current context. This is the default property that the browser uses to define the cursor.
      default
      
      The default cursor, which varies depending on the platform, is usually displayed as an arrow.
      none
      
      There is no cursor displayed.
      Links and Status
      context-menu
      
      The displayed cursor is context menu cursor, showing there is access to a context menu.
      help
      
      The displayed cursor is help cursor, showing information for assistance is accessible.
      pointer
      
      The displayed cursor is pointer cursor, showing the cursor serves as an indicator pointing to a hyperlink.
      progress
      
      The displayed cursor is progress cursor, showing the program is performing background tasks, allowing the user to maintain interaction with the interface instead of having to wait for its completion.
      wait
      
      The displayed cursor is cursor, The program is currently occupied, and the user cannot engage with the interface, this state is sometimes represented by an image of an hourglass or a watch.
      Drag and Drop
      alias
      
      The displayed cursor is alias cursor, showing there is need to generate an alias or shortcut.
      copy
      
      The displayed cursor is copy cursor, showing there is a requirement to create a copy of something.
      move
      
      The displayed cursor is move-cursor, showing something can be relocated.
      no-drop
      
      The displayed cursor is no-drop cursor, showing it may not be possible to place the item in its current location.
      not-allowed
      
      The displayed cursor is not-allowed cursor, showing the requested action will not be performed.
      grab
      
      The displayed cursor is grab cursor, showing that can grab the element and can be dragged to relocate it.
      grabbing
      
      The displayed cursor is grabbing cursor, showing something is being held or pulled to facilitate its movement.
      Selection
      cell
      
      The displayed cursor is cell cursor, showing the option to select the table cell or a group of cells.
      crosshair
      
      The displayed cursor is Crosshair cursor, commonly used to indicate the selection of elements in a bitmap.
      text
      
      The displayed cursor is text cursor, showing you can select the text that is normally indicated by an I-shaped cursor.
      vertical-text
      
      The displayed cursor is veritcal text cursor, showing you can select the vertical text, which is often indicated by a side-aligned I bar.
      Zooming
      zoom-in
      
      The displayed cursor is zoom-in, showing an object can be enlarged through zooming .
      zoom-out
      
      The displayed cursor is zoom-out, showing an object can be shrunk through zooming .
      Resizing and Scrolling
      all-scroll
      
      The displayed cursor is all scroll cursor, can scroll something in any direction, which is also referred to as panning.
      col-resize
      
      The displayed cursor is coloumn-resize cursor, showing element or column may be subject to horizontal resizing, often represented as arrows pointing left and right, separated by a vertical bar.
      row-resize
      
      The displayed cursor is row-resize cursor, showing element or line may be subject to vertical resizing, usually represented by arrows pointing both upward and downward, separated by a horizontal bar.
      n-resize
      
      The displayed cursor is north direction resize cursor, showing north side can be moved or shifted.
      e-resize
      
      The displayed cursor is east direction resize cursor, showing east side can be moved or shifted.
      s-resize
      
      The displayed cursor is south direction resize cursor, showing south side can be moved or shifted.
      w-resize
      
      The displayed cursor is west direction resize cursor, showing west side can be moved or shifted.
      ne-resize
      
      The displayed cursor is north-east resize cursor, showing cursor for bidirectional resizing.
      nw-resize
      
      The displayed cursor is north-west resize cursor, showing cursor for bidirectional resizing.
      se-resize
      
      The displayed cursor is south-east resize cursor, showing cursor for bidirectional resizing.
      sw-resize
      
      The displayed cursor is south-west resize cursor, showing cursor for bidirectional resizing.
      ew-size
      
      The displayed cursor is east-west resize cursor, showing cursor for bidirectional resizing.
      ns-resize
      
      The displayed cursor is north-south resize cursor, showing cursor for bidirectional resizing.
      nesw-resize
      
      The displayed cursor is north-east south-west resize cursor, showing cursor for bidirectional resizing.
      nwse-resize
      
      The displayed cursor is north-west south-east resize cursor, showing cursor for bidirectional resizing.

      Applies to

      All the HTML elements.

      DOM Syntax

         object.style.cursor = "cell";
      Some points to note:
      • The cursor property is characterized by a combination of values, which can range from zero to many <url>, separated by commas followed by a mandatory keyword (all keywords listed in table in the following section) value.
      • Each <url> should point to an image file.
      • The browser will try to load the first image specified, falling back to the next if it can't, and falling back to the keyword value if no images could be loaded (or if none were specified).

      CSS Cursor - Keyword Value

      Here is the example which shows various types of cursors in css 
      <html>
      <head>
      <title>All CSS Cursors</title>
      <style>
         .demo-cursor {
            display: inline-block;
            background-color: LightYellow;
            width: 100px;
            height: 100px;
            margin: 10px;
            border: 3px solid #ccc;
            cursor: pointer;
         }    
         .default { cursor: default; }
         .auto { cursor: auto; }
         .crosshair { cursor: crosshair; }
         .pointer { cursor: pointer; }
         .move { cursor: move; }
         .text { cursor: text; }
         .wait { cursor: wait; }
         .help { cursor: help; }
         .not-allowed { cursor: not-allowed; }
         .progress { cursor: progress; }
         .alias { cursor: alias; }
         .copy { cursor: copy; }
         .no-drop { cursor: no-drop; }
         .e-resize { cursor: e-resize; }
         .n-resize { cursor: n-resize; }
         .ne-resize { cursor: ne-resize; }
         .nw-resize { cursor: nw-resize; }
         .s-resize { cursor: s-resize; }
         .se-resize { cursor: se-resize; }
         .sw-resize { cursor: sw-resize; }
         .w-resize { cursor: w-resize; }
         .ew-resize { cursor: ew-resize; }
         .ns-resize { cursor: ns-resize; }
         .nesw-resize { cursor: nesw-resize; }
         .nwse-resize { cursor: nwse-resize; }
         .col-resize { cursor: col-resize; }
         .row-resize { cursor: row-resize; }
         .zoom-in { cursor: zoom-in; }
         .zoom-out { cursor: zoom-out; }
         .grab { cursor: grab; }
         .grabbing { cursor: grabbing; }
      </style>
      </head>
      <body>
      <h1>All CSS Cursors, hover the mouse on the blocks.</h1>
         <div class="demo-cursor auto"><h3 style="text-align:center;">Auto</h3></div>
         <div class="demo-cursor default"><h3 style="text-align:center;">Default</h3></div>
         <div class="demo-cursor crosshair"><h3 style="text-align:center;">Crosshair</h3></div>
         <div class="demo-cursor pointer"><h3 style="text-align:center;">Pointer</h3></div>
         <div class="demo-cursor move"><h3 style="text-align:center;">Move</h3></div>
         <div class="demo-cursor text"><h3 style="text-align:center;">Text</h3></div>
         <div class="demo-cursor wait"><h3 style="text-align:center;">Wait</h3></div>
         <div class="demo-cursor help"><h3 style="text-align:center;">Help</h3></div>
         <div class="demo-cursor not-allowed"><h3 style="text-align:center;">Not-allowed</h3></div>
         <div class="demo-cursor progress"><h3 style="text-align:center;">Progress</h3></div>
         <div class="demo-cursor alias"><h3 style="text-align:center;">Alias</h3></div>
         <div class="demo-cursor copy"><h3 style="text-align:center;">Copy</h3></div>
         <div class="demo-cursor no-drop"><h3 style="text-align:center;">No-drop</h3></div>
         <div class="demo-cursor e-resize"><h3 style="text-align:center;">e-resize</h3></div>
         <div class="demo-cursor n-resize"><h3 style="text-align:center;">n-resize</h3></div>
         <div class="demo-cursor ne-resize"><h3 style="text-align:center;">ne-resize</h3></div>
         <div class="demo-cursor nw-resize"><h3 style="text-align:center;">nw-resize</h3></div>
         <div class="demo-cursor s-resize"><h3 style="text-align:center;">s-resize</h3></div>
         <div class="demo-cursor se-resize"><h3 style="text-align:center;">se-resize</h3></div>
         <div class="demo-cursor sw-resize"><h3 style="text-align:center;">sw-resize</h3></div>
         <div class="demo-cursor w-resize"><h3 style="text-align:center;">w-resize</h3></div>
         <div class="demo-cursor ew-resize"><h3 style="text-align:center;">ew-resize</h3></div>
         <div class="demo-cursor ns-resize"><h3 style="text-align:center;">ns-resize</h3></div>
         <div class="demo-cursor nesw-resize"><h3 style="text-align:center;">nesw-resize</h3></div>
         <div class="demo-cursor nwse-resize"><h3 style="text-align:center;">nwse-resize</h3></div>
         <div class="demo-cursor col-resize"><h3 style="text-align:center;">col-resize</h3></div>
         <div class="demo-cursor row-resize"><h3 style="text-align:center;">row-resize</h3></div>
         <div class="demo-cursor zoom-in"><h3 style="text-align:center;">Zoom-in</h3></div>
         <div class="demo-cursor zoom-out"><h3 style="text-align:center;">Zoom-out</h3></div>
         <div class="demo-cursor grab"><h3 style="text-align:center;">Grab</h3></div>
         <div class="demo-cursor grabbing"><h3 style="text-align:center;">Grabbing</h3></div>
      </body>
      </html>

      CSS Cursor - <url> Value

      Here is the example which shows using image as cursor value
      <html>
      <head>
      <title>All CSS Cursors</title>
      <style>
         .demo-cursor {
            display: inline-block;
            background-color: LightYellow;
            width: 100px;
            height: 100px;
            margin: 10px;
            border: 3px solid #ccc;
            cursor: url(images/try-it.jpg), pointer;
         }   
      </style>
      </head>
      <body>
      <h1>Image CSS Cursors, hover the mouse on the block.</h1>
         <div class="demo-cursor"><h3 style="text-align:center;">Image Cursor</h3></div>
        </div>
      </body>
      </html>

      CSS Cursor - <url> Multiple Values

      Here is the example which shows using multiple images (comma separated) as cursor values
      <html>
      <head>
      <title>All CSS Cursors</title>
      <style>
         .demo-cursor {
            display: inline-block;
            background-color: LightYellow;
            width: 100px;
            height: 100px;
            margin: 10px;
            border: 3px solid #ccc;
            cursor: url(images/try-it.jpg),url(images/cursor-text1.png),  crosshair;
         }   
      </style>
      </head>
      <body>
      <h1>Image CSS Cursors, hover the mouse on the block.</h1>
         <div class="demo-cursor"><h3 style="text-align:center;">Image Cursor</h3></div>
        </div>
      </body>
      </html>
      Try renaming first image file name to try-it-1.jpg (so that image is not found) and thene execute the program. We see the fallback effect, i.e when first image is not found the source, control fallsback on second image and that is used as cursor.