Cursor Property in CSS

Hello guys. Welcome to our CSS series. In our last segment we have seen about CSS print property. How can we add page breaks in a web page while printing with the help of three different properties? We had learned that. Our today's segment is about the CSS cursor property. What does a cursor mean? The mouse pointer which is there, let’s say, currently I'm showing it in the slide. Here I'm getting a pointer to the mouse. There are different designs of mouse pointers, what are those that we can tell from a cursor. Currently, let’s say that we are seeing something like an arrow, this is the default property of the mouse. For this mouse there are different designs that are available, while hovering over different designs, if we want a different design of the mouse, if you want to indicate something in that case, we can work with the cursor property. With the help of cursor property, we can design any cursor of our wish. Like it is mentioned here, it is used to define the type of mouse cursor when the mouse pointer is on the element. Which means when our mouse pointer is on any element at that time, what is the design of the mouse that we want? We can see that with its help. Now let's see the different examples of different types of mouse pointers, the cursor property that is there for the mouse pointers. What are the different mouse pointer variations that we can bring through CSS? That is what we are going to see in today's section. So, let's say I open one program and in that example, cursor, now in this we are going to see all different types of cursor designs. So, let's say I take one div and in that let's say I will not take h1 but h3 tag. H1 is quite big visually. So, in h3, different types of cursors. I will give the background colour property with the help of class. So, let’s say I will take class, cursor, types. Guys, pay attention that whenever we are giving the name for the class, as much as possible, we shouldn't give the CSS property name as there are chances that it will lead to confusion. Sometimes because of this reason our CSS doesn't get applied. So, when you're given a class or ID name, keep such a name that either it is a combination and it's not a key word mostly. The properties or attributes that are there of html, CSS, those should not be there. You pay attention to that. Here the class name is not cursor but cursor types. So that we get to know that this class is about cursor types. Now I will define it with internal CSS. So here I will mention style. Here after the dot my class name and in this I will write, let's say background colour. (Pause).  I will take light green and text align, (Pause) centre we will take and in cursor types, whichever they're. Let's say the font size will be 15 pixels. Now I will save it. So, let's say I will give the name cursor.html, now I will run this program. Okay, so here my program is running, okay. So here I am getting different types of cursors, the spacing that is coming here, if we want to remove it, so what we will do is, our body that is there, in our body, we will take the background colour, so our spacing problem will be removed. So, we are getting different types of cursors in the h3 tag. Now we will take here in h3, in each and every one we will create different divisions and, in each division, we will place different types of cursors. Let’s say if we see our first slide, our first type is cursor alias type. To every division we will give each of our cursor types an inline division. Let’s say like we give here division, style, cursor. First is our style alias. So, our style name will be alias a l i a s. Okay. Now, we will give this, let's say, this is alias type or cursor, cursor. As soon as I save this and run it while hovering you can see that I'm getting one arrow on the cursor, at the side there is a small arrow that is getting generated. This is our alias type, let's say our other type is our auto, so here we will write auto and generate it. While writing auto it becomes editable, like when we go to a text field, like when we go on the url bar. The cursor that I am getting there, that is what we are getting while going there. That is our auto style. Now, let’s say our 3^rd style is about all scroll. All scroll means it is used for the scroll bar. So, let’s say all scroll, save. In all scroll when we take it on a scroll bar, we get something like this. So, this is our all-scroll design. Then our next style is column resize. So, column resize means as you can see when we keep the cursor in between two available columns. We are getting something like this from which we can get to know about the resize. Okay from here our column can get resized. Our next is named cross hair. Cross, without dash, hair. Okay. When I'm taking it here, I'm getting a big plus sign. Our next is, after the crosshair, our default cursor that is there. Save, run. Default means currently, my arrow which is visible, that is my default cursor size. This is our arrow default. After default, comes, copy and when we have to perform copy. C O P Y, reload. When I'm taking it on a copy, I'm getting a small plus sign over the copy. Which indicates copy. When we use Excel, we normally see this style there. After the copy comes a pointer. The most used style of cursor is pointer. As soon as I take it over my cursor changes from an arrow to a hand icon, I can see such an icon. Whenever we work with a web page or when we generate any anchor tags means if we're generating any link. So, for the link the icon that we generate is the hand icon which means cursor pointer. This is mostly used for the link. After the pointer comes, move, which is called M O V E, move. When I take over it, I get a square with a plus sign with arrows, which indicates, it is called move sign. After move comes e-resize, let's say E dash R E S I Z E, e-resize, okay. E-resize means one arrow and to its left and right corner we get, this indicates that we can resize in the left and right direction. Similar to a e-resize we have ew, ew. Hear it will come ew, even here ew, save. EW shows east west, the work that e-resize does, same work ew does. Similarly, there's another property, apart from ew is ne. That is ne, save, run. When I selected ne. We can consider it as north east, means when we want our cursor in cross, at that time we can define it ne. Similar to ne we have one more, nw, nw, save, reload. In nw I am getting backward slash, similar to forward slash. Instead of forward slash, I am getting backward slash with an arrow.  Now after nw we are getting only n. What are we getting in n? We are getting our cursor in vertical arrow, like in e we had horizontal. We are getting a vertical cursor now. Now, let’s say after n-resize comes one more property, se, se. In se, we are getting our cursor same in the backward style. And same, if we see another property apart from se we have sw. Save, reload. In sw also we are getting with forward. Like ne, nw, is se, sw. There is not much of a difference in it. Now, after se, sw comes only s-resize, like s-resize is our w, w-resize. We'll see these both together, s-resize, w-resize. Okay. So here comes s-resize and w-resize. Like our e and n resize, in the same way we have s and w resize. It's the same but the different indications have been given for the cursor. Now we will come to very important text, in the cursor text, which indicates there is text written here. This is our text cursor style. When we hover over the url, we were getting the same, text cursor. After text comes wait. Okay. So, this is our wait, wait means in circular. It indicates that there is a process going on here. So, this is our wait cursor. This is a very important cursor, when we click on the taskbar, we get something like this or when there is any background process going on at that time, we get a wait cursor. After weight comes help, help means here with the question, after the arrow question mark which indicates that if we click on it, on this element, that can be redirected to a help related web page or any portion can be open which will give us help. Next is our progress. Save, reload. So, progress means like in wait it was only a circle. In progress there is a circle over the arrow. Means here there is a task going on but it is in progress. So, this is our indication of progress. After progress comes no drop. No D R O P, no drop. No drop is an indication when we show the input field in disabled mode. When we want that our user should not be able to edit the portion, which means our input field, it is not editable for the user. Means to restrict.  With restricted indication, no drop cursor.  After no drop comes not allowed, not allowed. (Pause) What are we getting in not allowed? Like, we have no drop, not allowed is also the same. Now comes our vertical text, vertical text. Vertical text means like for text we were getting in horizontal, vertical text, here we are getting it in horizontal. Our terms are altered here: you're getting vertical instead of horizontal. After vertical text comes in, zoom in. Zoom in and similar is zoom out. These two are our last ones. Okay. When I'm clicking on zoom in, I'm getting a magnifying glass with a plus icon. When I am zooming out, magnifying glass with minus icon. These are all our different cursor styles. Like if I see from up as I'm coming down, I'm getting different types of cursors. Like you can see here. Okay. On every row, my cursor is getting changed. All these that we have seen in our today's session. All these are different types of cursors. As we want, as per the user's requirement, based on the user’s requirement, we can generate our cursor. From this the most important are our cursor pointer, no drop, zoom in, zoom out, progress are there. These are the ones that are mostly used when we are working with a web page. So, the user while hovering over, which means when takes the cursor on any element. At that time, he gets to know that from this element this type of work can be done. If it is disabled, we put no drop there.  So that we get to know that the user cannot write over here. If there is a link we can use the hand cursor, which is shown in the pointer here. With this the user knows that we have to click here. All these that we saw in our today's session were examples of different types of cursors. In this slide every cursor’s name is mentioned, in total we have seen today 27 types of cursors today. So, guys in today's section, the different types of cursors that were shown you can try these on your own. Mainly when we design the webpage, which are the useful ones we will use those and whenever we go in a certain industry to work as per the requirement, the cursor which we can use, we will make it applicable there. So, guys, in today's session, If you have any queries or comments, click the discussion button below the video and post there. This way, you will be able to connect to fellow learners and discuss the course. Also, Our Team will try to rectify your issues at the earliest and revert to you. Our next segment would be on CSS buttons. Thank you, guys.