Introduction to CSS Cursor
For anybody who is working on a system, the mouse cursor is very important. One gets the sense of re-direction with the help of a virtual cursor. There are various symbols or icons of the cursor, which universally defines the status of the system. Cascading Style sheets offer cursor property using which one can create and customize the cursors of their choice. In this way, they can pre-decide how the cursor must behave while an end-user navigates through their page. This property offers numerous variants of the cursor, which can be used as needed in accordance with the type of content or elements going in the page.
Syntax
The syntax for creating a cursor in CSS is:
cursor: value| initial| inherit;Explanation: Here, the value represents the type of cursor needed. In CSS, a developer gets multiple choices for creating a cursor. Some of them are copy, progress, cross-hair, grab, grabbing, help, move, not-allowed, no-drop, text, vertical text, cell, wait, zoom-in, zoom-out, context-menu, etc. It is upon the developer to decide which cursor to use when. In addition to this, there is an option to use URL as a value and import any specific cursor design available online. One is always free to try all the options in CSS.
Examples to Implement CSS Cursor
Let us have a look at some of the uses of Cursors and how we can implement them through external, internal and inline CSS.
1. External CSS Cursor
- This example is an external CSS code, so we will start with coding the CSS file first.
- For demonstrating different kinds of a cursor, we will define different classes, which will call for different values of the cursor. The code for the CSS file should be similar to the following code snippet:
Code:
.cursor1{
cursor: grab;
background-color: palegreen;
}
.cursor2{
cursor: not-allowed;
font-size: 16px;
background-color: peachpuff;
}
.cursor3{
cursor: zoom-in;
font-size: 18px;
background-color: peru;
}
.cursor4{
cursor: zoom-out;
}
.cursor5{
cursor: e-resize;
}
.cursor6{
cursor: n-resize;
}
.cursor7{
cursor: s-resize;
}
.cursor8{
cursor: w-resize;
}
.cursor9{
cursor: alias;
}
.cursor10{
cursor: all-scroll;
}
.cursor11{
cursor: copy;
}
.cursor12{
cursor: help;
}
.cursor13{
cursor: move;
}
.cursor14{
cursor: none;
}
.cursor15{
cursor: wait;
}
.cursor16{
cursor: context-menu;
}
.cursor17{
cursor: pointer;
}- Now that the CSS code is final, we will create the HTML page for the same. Since its external CSS, please note that we will have to call the css file in the header section of the html code.
- In the body section, we will use several paragraph elements, such that we use all the classes defined in the CSS file. The final HTML code should be similar to this code:
Code:
<html>
<head>
<title>Cursor Demo</title>
<link rel = "stylesheet" href = "cursor.css">
</head>
<body>
<p class="cursor1">This is demo for grab cursor</p>
<p class="cursor2">This is demo for not-allowed cursor</p>
<p class="cursor3">This is demo for zoom in cursor</p>
<p class="cursor4">This is demo for zoom out cursor</p>
<p class="cursor5">This is demo for e-resize cursor</p>
<p class="cursor6">This is demo for n-resize cursor</p>
<p class="cursor7">This is demo for s-resize cursor</p>
<p class="cursor8">This is demo for w-resize cursor</p>
<p class="cursor9">This is demo for alias cursor</p>
<p class="cursor10">This is demo for all-scroll cursor</p>
<p class="cursor11">This is demo for copy cursor</p>
<p class="cursor12">This is demo for help cursor</p>
<p class="cursor13">This is demo for move cursor</p>
<p class="cursor14">This is demo for no cursor (value: none)</p>
<p class="cursor15">This is demo for wait cursor</p>
<p class="cursor16">This is demo for context-menu cursor</p>
<p class="cursor17">This is demo for pointer cursor</p>
</body>
</html>Output: When this html code is saved and opened through a browser it will give the following output.
2. Internal CSS Cursor
- This example uses internal CSS, so we will directly code for the HTML page.
- Since this is internal CSS, we will define the styling in the header section, within the <style /> tag. For this example, we will style the paragraph tag. The code will be as follows:
Code:
<style>
p{
background-color: cornflowerblue;
border: darkorchid dotted;
cursor: not-allowed;
font-style: italic;
margin: 100px;
padding: initial;
text-decoration: underline;
}
</style>- We will code for the body section such that there is the utilization of paragraph tag <p> This way, the demonstration of the no-drop cursor can be ensured. The HTML code for the same will be similar to the following code:
Code:
<html>
<head>
<title>Cursor through Internal CSS</title>
<style>
p{
background-color: cornflowerblue;
border: darkorchid dotted;
cursor: not-allowed;
font-style: italic;
margin: 100px;
padding: initial;
text-decoration: underline;
}
</style>
</head>
<body>
<p>This paragraph demonstrates the internal Styling done for the element. This also has the demo for not-allowed cursor, which will project once the text is hovered over.</p>
</body>
</html>Output: Saving this code and running or opening the file through a browser will fetch the following result.
- Like the previous example, once the code is compiled and run, then the cursor can be seen while hovering over the highlighted paragraph.
- This is a very basic use of a cursor, for demo purposes. A developer can use as many types of cursor as needed, depending on the requirement.
3. Inline CSS Cursor
- This example uses the inline style of CSS for demonstrating the Cursor property offered by the language.
- We will directly code the HTML page and will style the element, within the element tag using style parameter. The final HTML code should be similar to the following code:
Code:
<html>
<head>
<title>Cursors using Inline CSS</title>
</head>
<body>
<p style="cursor: no-drop; background-color: lightpink;">This is no drop cursor, using inline CSS</p>
<p style="cursor: progress; background-color: lightskyblue;">This is progress cursor using inline CSS</p>
<p style="cursor:text; background-color: lightsalmon;">This is text cursor using inline CSS</p>
</body>
</html>Output: To view the output of the code above, save the file and open it through any browser. The result should be like this.
- Like previous examples, one can see different cursors while hovering over each paragraph in the browser.
- Inline style CSS works handy for cursor property as a developer can style the cursor on the go, instead of deciding on it previously. This way, while coding for the content, the developer will have a fair idea which cursor to use in which part of the content.
Conclusion
In the above few examples, we learned how to use the Cursors offered by CSS. In addition to the values offered by CSS, one can always use customized cursor by using the URL value for the cursor. Cursors are important as they signify the current status of the content. If the cursors are decided appropriately for a page, the navigation throughout becomes smooth for the end-user. The examples depict very basic uses of a cursor. Developers can try and experiment through more exploration.
Recommended Articles
This is a guide to CSS Cursor. Here we discuss an introduction, Syntax, examples to implement CSS Cursor with proper codes and outputs. You can also go through our other related articles to learn more –
