{"id":19349,"date":"2020-07-11T11:13:11","date_gmt":"2020-07-11T18:13:11","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=19349"},"modified":"2020-12-29T11:31:25","modified_gmt":"2020-12-29T19:31:25","slug":"css-cursor","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/css-cursor\/","title":{"rendered":"A Guide to the CSS Cursor Property"},"content":{"rendered":"\n<p><em>Cursors have been around since \u201c<\/em><a href=\"https:\/\/www.youtube.com\/watch?v=JQ8ZiT1sn88\" target=\"_blank\" rel=\"noopener\" rel=\"nofollow\"><em>The Mother of All Demos<\/em><\/a><em>\u201d where Douglas Englebart introduced to the world the mouse and the graphical user interface in the late sixties. The mouse cursor allows us to see where we are in space on our computer screen. As a user experience tool, it\u2019s really great at being able to show us what we can do at any point on the screen or what the computer is doing. This article will tell you about some of the ways we can use the mouse cursor on our webpage to improve the user experience of your website.&nbsp;<\/em><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Syntax<\/h2>\n\n\n\n<p>In our CSS selector, we use the following syntax to change the cursor to something other than the default arrow.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>cursor: [ url(1.png), url(2.png) ], etc.,\n        &lt;mandatory keyword value&gt;<\/pre><\/div>\n\n\n\n<p>In between the first set of square brackets, we have a list of urls, separated by commas. This is an optional value. It allows for custom cursors to be used \u2013 there are any number of custom cursor creators on the internet to help you create something that\u2019s uniquely yours.&nbsp;<br><\/p>\n\n\n\n<p>The comma separated list indicates that the browser will try to load the first one. If it can\u2019t find the first one or the url is not correct, it\u2019ll go on down the list until it finds one that works or it\u2019ll be set to the mandatory keyword at the end.&nbsp;<br><\/p>\n\n\n\n<p>The first parameter \u2013 with the urls is optional. The second is not. You must include a keyword that gives a set of instructions to tell which cursor type you would like to see there. Here are some of the available values:<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n&lt;head&gt;\n&lt;meta charset=&quot;utf-8&quot;&gt;\n&lt;title&gt;Example of CSS custom cursor&lt;\/title&gt;\n&lt;style&gt;      \n    table {\n     width:100%;\n     text-align: center;\n     border-collapse: collapse;\n     font-family: 'Roboto', sans-serif;\n   }\n   thead {\n     width: 100%;\n     background: lightblue;\n   }\n \n   tr:nth-child(even) {\n     background-color: lightgrey;\n   }\n \n   td {\n     width: 32%;\n     height: 50px;\n     padding: 10px;\n   }\n \n   td.test {\n     color: red;\n     font-weight: bold;\n   }\n \n   td#auto {\n     cursor: auto;\n   }\n \n   td#cell {\n     cursor: cell;\n   }\n \n   td#crosshair {\n     cursor: crosshair;\n   }\n \n   td#default {\n     cursor: default;\n   }\n \n   td#none {\n     cursor: none;\n   }\n \n   td#pointer {\n     cursor: pointer;\n   }\n \n   td#help {\n     cursor: help;\n   }\n \n   td#progress {\n     cursor: progress;\n   }\n \n   td#wait {\n     cursor: wait;\n   }\n \n   td#text {\n     cursor: text;\n   }\n \n   td#vertical-text {\n     cursor: vertical-text;\n   }\n \n   td#zoom-in {\n     cursor: zoom-in;\n   }\n   td#zoom-out {\n     cursor: zoom-out;\n   }\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;table&gt;\n   &lt;thead&gt;\n     &lt;td&gt;Cursor Type:&lt;\/td&gt;\n     &lt;td&gt;Description:&lt;\/td&gt;\n     &lt;td&gt;Test it Out: &lt;\/td&gt;\n   &lt;\/thead&gt;\n   &lt;tr&gt;\n     &lt;td&gt;auto&lt;\/td&gt;\n     &lt;td&gt;Automatically figures out which cursor to use based on context.&lt;\/td&gt;\n     &lt;td class=&quot;test&quot; id=&quot;auto&quot;&gt; TEST &lt;\/td&gt;\n   &lt;\/tr&gt;\n   &lt;tr&gt;\n     &lt;td&gt;default&lt;\/td&gt;\n     &lt;td&gt;Typically an arrow, but depends on platform being used.&lt;\/td&gt;\n     &lt;td class=&quot;test&quot; id=&quot;default&quot;&gt; TEST &lt;\/td&gt;\n   &lt;\/tr&gt;\n   &lt;tr&gt;\n     &lt;td&gt;help&lt;\/td&gt;\n     &lt;td&gt;Used to indicate help is available&lt;\/td&gt;\n     &lt;td class=&quot;test&quot; id=&quot;help&quot;&gt; TEST &lt;\/td&gt;\n   &lt;\/tr&gt;\n   &lt;tr&gt;\n     &lt;td&gt;none&lt;\/td&gt;\n     &lt;td&gt;No cursor present&lt;\/td&gt;\n     &lt;td class=&quot;test&quot; id=&quot;none&quot;&gt; TEST &lt;\/td&gt;\n   &lt;\/tr&gt;\n   &lt;tr&gt;\n     &lt;td&gt;pointer&lt;\/td&gt;\n     &lt;td&gt;Most often used when hovering over link or button to indicate it can be clicked.&lt;\/td&gt;\n     &lt;td class=&quot;test&quot; id=&quot;pointer&quot;&gt; TEST &lt;\/td&gt;\n   &lt;\/tr&gt;\n   \n    &lt;tr&gt;\n     &lt;td&gt;progress&lt;\/td&gt;\n     &lt;td&gt;A mashup of pointer and wait - indicates that the UI can still be interacted with while something else is happening...&lt;\/td&gt;\n     &lt;td class=&quot;test&quot; id=&quot;progress&quot;&gt; TEST &lt;\/td&gt;\n   &lt;\/tr&gt;\n    &lt;tr&gt;\n     &lt;td&gt;text&lt;\/td&gt;\n     &lt;td&gt;Tells the user text can be highlighted.&lt;\/td&gt;\n     &lt;td class=&quot;test&quot; id=&quot;text&quot;&gt; TEST &lt;\/td&gt;\n   &lt;\/tr&gt;\n    &lt;tr&gt;\n   &lt;tr&gt;\n     &lt;td&gt;wait&lt;\/td&gt;\n     &lt;td&gt;Indicates that the computer is thinking and user CANNOT interact with UI...&lt;\/td&gt;\n     &lt;td class=&quot;test&quot; id=&quot;wait&quot;&gt; TEST &lt;\/td&gt;\n   &lt;\/tr&gt;\n    &lt;tr&gt;\n     &lt;td&gt;zoom-in&lt;\/td&gt;\n     &lt;td&gt;Indicates to user that we can zoom in on something. &lt;\/td&gt;\n     &lt;td class=&quot;test&quot; id=&quot;zoom-in&quot;&gt; TEST &lt;\/td&gt;\n   &lt;\/tr&gt;\n   &lt;tr&gt;\n     &lt;td&gt;zoom-out&lt;\/td&gt;\n     &lt;td&gt;Indicates to user that we can zoom out on something. &lt;\/td&gt;\n     &lt;td class=&quot;test&quot; id=&quot;zoom-out&quot;&gt; TEST &lt;\/td&gt;\n   &lt;\/tr&gt;\n &lt;\/table&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre><\/div>\n\n\n\n<p>The code above only shares some of the available cursors that we can use on our site. Check out the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/cursor\" target=\"_blank\" rel=\"noopener\" rel=\"nofollow\">MDN<\/a> for others.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Today we have gone over some of the different ways to add cursors to your website to assist in improving the user experience. By using the cursor to indicate what can be done on any given point on the page, users know what to expect when they navigate your site. There are many more than the ones mentioned here.&nbsp;<br><\/p>\n\n\n\n<p>I recommend checking out the different ways you can customize your cursor to fit your needs. And remember: the cursor is just one half of the UX. The other half is actually implementing what the user expects the cursor to do. We\u2019ll get into that another time. Happy hacking!&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"Cursors have been around since \u201cThe Mother of All Demos\u201d where Douglas Englebart introduced to the world the mouse and the graphical user interface in the late sixties. The mouse cursor allows us to see where we are in space on our computer screen. As a user experience tool, it\u2019s really great at being able&hellip;","protected":false},"author":77,"featured_media":19350,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-19349","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-css"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"CSS","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>A Guide to the CSS Cursor Property | Career Karma<\/title>\n<meta name=\"description\" content=\"Cursors are the little pointer devices that show where our mouse is on our screen. Cursors in CSS are important because they illustrate what can be done at any given point on our page. This tutorial will show the different ways to use the CSS cursor property.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/css-cursor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Guide to the CSS Cursor Property\" \/>\n<meta property=\"og:description\" content=\"Cursors are the little pointer devices that show where our mouse is on our screen. Cursors in CSS are important because they illustrate what can be done at any given point on our page. This tutorial will show the different ways to use the CSS cursor property.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/css-cursor\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-11T18:13:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-29T19:31:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/liam-briese-wB7V7mhufy4-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"680\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Christina Kopecky\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Christina Kopecky\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-cursor\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-cursor\\\/\"},\"author\":{\"name\":\"Christina Kopecky\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\"},\"headline\":\"A Guide to the CSS Cursor Property\",\"datePublished\":\"2020-07-11T18:13:11+00:00\",\"dateModified\":\"2020-12-29T19:31:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-cursor\\\/\"},\"wordCount\":414,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-cursor\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/liam-briese-wB7V7mhufy4-unsplash.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-cursor\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-cursor\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-cursor\\\/\",\"name\":\"A Guide to the CSS Cursor Property | Career Karma\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-cursor\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-cursor\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/liam-briese-wB7V7mhufy4-unsplash.jpg\",\"datePublished\":\"2020-07-11T18:13:11+00:00\",\"dateModified\":\"2020-12-29T19:31:25+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\"},\"description\":\"Cursors are the little pointer devices that show where our mouse is on our screen. Cursors in CSS are important because they illustrate what can be done at any given point on our page. This tutorial will show the different ways to use the CSS cursor property.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-cursor\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-cursor\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-cursor\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/liam-briese-wB7V7mhufy4-unsplash.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/liam-briese-wB7V7mhufy4-unsplash.jpg\",\"width\":1020,\"height\":680,\"caption\":\"Close up of a white and black cursor on black background.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-cursor\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"A Guide to the CSS Cursor Property\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\",\"name\":\"Christina Kopecky\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"caption\":\"Christina Kopecky\"},\"description\":\"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.\",\"sameAs\":[\"http:\\\/\\\/www.linkedin.com\\\/in\\\/cmvnk\"],\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/author\\\/christina-kopecky\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"A Guide to the CSS Cursor Property | Career Karma","description":"Cursors are the little pointer devices that show where our mouse is on our screen. Cursors in CSS are important because they illustrate what can be done at any given point on our page. This tutorial will show the different ways to use the CSS cursor property.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/careerkarma.com\/blog\/css-cursor\/","og_locale":"en_US","og_type":"article","og_title":"A Guide to the CSS Cursor Property","og_description":"Cursors are the little pointer devices that show where our mouse is on our screen. Cursors in CSS are important because they illustrate what can be done at any given point on our page. This tutorial will show the different ways to use the CSS cursor property.","og_url":"https:\/\/careerkarma.com\/blog\/css-cursor\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-07-11T18:13:11+00:00","article_modified_time":"2020-12-29T19:31:25+00:00","og_image":[{"width":1020,"height":680,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/liam-briese-wB7V7mhufy4-unsplash.jpg","type":"image\/jpeg"}],"author":"Christina Kopecky","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"Christina Kopecky","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/css-cursor\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/css-cursor\/"},"author":{"name":"Christina Kopecky","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"headline":"A Guide to the CSS Cursor Property","datePublished":"2020-07-11T18:13:11+00:00","dateModified":"2020-12-29T19:31:25+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-cursor\/"},"wordCount":414,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-cursor\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/liam-briese-wB7V7mhufy4-unsplash.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/css-cursor\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/css-cursor\/","url":"https:\/\/careerkarma.com\/blog\/css-cursor\/","name":"A Guide to the CSS Cursor Property | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-cursor\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-cursor\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/liam-briese-wB7V7mhufy4-unsplash.jpg","datePublished":"2020-07-11T18:13:11+00:00","dateModified":"2020-12-29T19:31:25+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"description":"Cursors are the little pointer devices that show where our mouse is on our screen. Cursors in CSS are important because they illustrate what can be done at any given point on our page. This tutorial will show the different ways to use the CSS cursor property.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/css-cursor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/css-cursor\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/css-cursor\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/liam-briese-wB7V7mhufy4-unsplash.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/liam-briese-wB7V7mhufy4-unsplash.jpg","width":1020,"height":680,"caption":"Close up of a white and black cursor on black background."},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/css-cursor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/careerkarma.com\/blog\/css\/"},{"@type":"ListItem","position":3,"name":"A Guide to the CSS Cursor Property"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e","name":"Christina Kopecky","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","caption":"Christina Kopecky"},"description":"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.","sameAs":["http:\/\/www.linkedin.com\/in\/cmvnk"],"url":"https:\/\/careerkarma.com\/blog\/author\/christina-kopecky\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/19349","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/77"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=19349"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/19349\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/19350"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=19349"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=19349"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=19349"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}