{"id":4494,"date":"2018-04-30T20:18:02","date_gmt":"2018-04-30T20:18:02","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/2018\/04\/30\/how-to-edit-css-using-google-chrome-developer-tools\/"},"modified":"2025-06-12T16:55:19","modified_gmt":"2025-06-12T20:55:19","slug":"how-to-edit-css-using-google-chrome-developer-tools","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-edit-css-using-google-chrome-developer-tools\/","title":{"rendered":"How to Edit CSS Using Google Chrome Developer Tools"},"content":{"rendered":"

The Google Chrome<\/em> browser includes Developer Tools<\/strong> to assist with troubleshooting and developing your website. For instance, by using its device toolbar you can easily preview websites as they would display on various mobile devices. There are also tools that allow you to Inspect Elements<\/em> on a page and edit the CSS live<\/em>, without affecting the experience for other visitors interacting with your website. This can be useful in developing and previewing CSS modifications to your existing website prior to making those changes live. In this guide, you will learn how to use Google Chrome\u2019s Developer Tools<\/strong> to inspect an element<\/em>, modify CSS<\/em>, and preview CSS changes in your browser<\/em>.<\/p>\n

\r\n

We Build Stunning WordPress Sites And Keep Them Updated<\/strong><\/p>\r\n

Focus on growing your business while we handle everything from professional website design to regular updates, backups, and security.<\/p>\r\n

Talk to a WordPress Expert Today<\/a><\/p>\r\n<\/div>\n

Access Chrome Developer Tools<\/h2>\n
    \n
  1. \n
      \n
    1. \n

      Open the Google Chrome browser application on your computer.<\/p>\n

      \n

      NOTE:<\/b> If your computer does not have this browser, you will need to install Google Chrome<\/a> in order to utilize the DevTools included.<\/p>\n<\/div>\n<\/li>\n

    2. \n

      Visit your website and navigate to a page that you want to make changes on.<\/p>\n<\/li>\n

    3. \n

      To open Google Developer Tools you can follow any of the steps below:<\/p>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n

      \n
      Press the F12<\/b> key.<\/dt>\n
      Select the Menu<\/b> icon, hover over More Tools<\/b>, and click on Developer tools<\/strong>.<\/dt>\n
      Press Ctrl<\/b> + Shift<\/b> + i<\/b> for Windows\/Linux (or command<\/b> + option<\/b> + i<\/b> for Mac).<\/dt>\n
      Right-click on an element on your website page and select Inspect<\/b>.<\/dt>\n<\/dl>\n

      Now that you are familiar with accessing Google Chrome Developer Tools<\/em>, you will be able to inspect CSS elements<\/em> to modify them live.<\/p>\n

      Inspect an Element<\/h2>\n

      Inspecting an element<\/em> helps to identify the code needed to modify a particular object on your website. Google Developer Tools<\/strong> simplifies this process by displaying and highlighting the specific code that renders the element being inspected. Follow either of the steps below to learn how to inspect an element<\/strong>.<\/p>\n

        \n
      1. \n

        Open Google Developer Tools and click the Select Element<\/b> icon from the top left.<\/p>\n

        \n

        NOTICE:<\/b> As you hover over elements on your page, they will be highlighted.<\/p>\n<\/div>\n<\/li>\n

      2. \n

        Click on any object (text, heading, image, etc) that you would like to customize.<\/p>\n

        \n

        NOTICE:<\/b> The Elements<\/em> tab displays and highlights the HTML for the element you click on.<\/p>\n<\/div>\n<\/li>\n<\/ol>\n

        Inspecting an element<\/strong> is the first step to implementing the code needed to modify the object you want. However, DevTools<\/em> also allows you to modify CSS live<\/strong>.<\/p>\n

        Making Live Changes to CSS<\/h2>\n

        Google Chrome<\/strong> provides the ability to make changes to the CSS live<\/em> from within the DevTools Console<\/strong>. This ensures that you are able to preview the changes yourself without affecting the appearance of your website for other visitors. There is no need to refresh your browser to see the changes, they are updated in real-time. In fact, if you refresh your browser after making changes in the Developer Tools console<\/em>, your changes will be lost because the browser will reload the unmodified version of your website. Using Chrome for live CSS testing ensures that your live website\u2019s actual code remains untouched.<\/p>\n

          \n
        1. \n

          Navigate to a page of your website that you would like to modify the CSS for and inspect an element on the page.<\/p>\n<\/li>\n

        2. \n

          Click on the Computed<\/b> tab.<\/p>\n

          \n

          NOTICE:<\/b> A list of attributes for the inspected element is displayed.<\/p>\n<\/div>\n<\/li>\n

        3. \n

          Hover over an attribute and click on the arrow icon that appears next to its value.<\/p>\n

          \n

          NOTICE:<\/b> You will be navigated to the Styles<\/b> tab and the attribute for the selected element will flash once.<\/p>\n<\/div>\n<\/li>\n

        4. \n

          To change an attribute, you can simply click on the value and type in the new value you want.<\/p>\n

          \n

          NOTICE:<\/b> Your changes will appear immediately, there is no need to refresh the page.<\/p>\n<\/div>\n<\/li>\n<\/ol>\n

          Now that you are familiar with this neat tool found in your Google Chrome browser<\/strong>, you can unleash your CSS editing skills.<\/p>\n\n\n

          \n
          \n\t\n\t\t\"How\n\t\t<\/span>\n\t<\/a>\n<\/div><\/div>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"

          The Google Chrome browser includes Developer Tools to assist with troubleshooting and developing your website. For instance, by using its device toolbar you can easily preview websites as they would display on various mobile devices. There are also tools that allow you to Inspect Elements on a page and edit the CSS live, without affecting Read More ><\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4322],"tags":[],"class_list":["post-4494","post","type-post","status-publish","format-standard","hentry","category-google-tools"],"acf":[],"yoast_head":"\nHow to Edit CSS Using Google Chrome Developer Tools | InMotion Hosting<\/title>\n<meta name=\"description\" content=\"In this guide, you will learn how to use Google Chrome's Developer Tools to inspect an element, modify CSS, and preview CSS changes in your browser.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-edit-css-using-google-chrome-developer-tools\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Edit CSS Using Google Chrome Developer Tools | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"In this guide, you will learn how to use Google Chrome's Developer Tools to inspect an element, modify CSS, and preview CSS changes in your browser.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-edit-css-using-google-chrome-developer-tools\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-04-30T20:18:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-12T20:55:19+00:00\" \/>\n<meta name=\"author\" content=\"InMotion Hosting Contributor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InMotion Hosting Contributor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-edit-css-using-google-chrome-developer-tools\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-edit-css-using-google-chrome-developer-tools\/\"},\"author\":{\"name\":\"InMotion Hosting Contributor\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5fbfcaed32a2672fb83ab312f5b7237b\"},\"headline\":\"How to Edit CSS Using Google Chrome Developer Tools\",\"datePublished\":\"2018-04-30T20:18:02+00:00\",\"dateModified\":\"2025-06-12T20:55:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-edit-css-using-google-chrome-developer-tools\/\"},\"wordCount\":629,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"articleSection\":[\"Google Tools\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-edit-css-using-google-chrome-developer-tools\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-edit-css-using-google-chrome-developer-tools\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-edit-css-using-google-chrome-developer-tools\/\",\"name\":\"How to Edit CSS Using Google Chrome Developer Tools | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"datePublished\":\"2018-04-30T20:18:02+00:00\",\"dateModified\":\"2025-06-12T20:55:19+00:00\",\"description\":\"In this guide, you will learn how to use Google Chrome's Developer Tools to inspect an element, modify CSS, and preview CSS changes in your browser.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-edit-css-using-google-chrome-developer-tools\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-edit-css-using-google-chrome-developer-tools\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-edit-css-using-google-chrome-developer-tools\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Edit CSS Using Google Chrome Developer Tools\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support & Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5fbfcaed32a2672fb83ab312f5b7237b\",\"name\":\"InMotion Hosting Contributor\",\"description\":\"InMotion Hosting contributors are highly knowledgeable individuals who create relevant content on new trends and troubleshooting techniques to help you achieve your online goals!\",\"sameAs\":[\"https:\/\/www.linkedin.com\/company\/inmotion-hosting\/\",\"https:\/\/x.com\/https:\/\/twitter.com\/InMotionHosting\"],\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/john-paul\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Edit CSS Using Google Chrome Developer Tools | InMotion Hosting","description":"In this guide, you will learn how to use Google Chrome's Developer Tools to inspect an element, modify CSS, and preview CSS changes in your browser.","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:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-edit-css-using-google-chrome-developer-tools\/","og_locale":"en_US","og_type":"article","og_title":"How to Edit CSS Using Google Chrome Developer Tools | InMotion Hosting","og_description":"In this guide, you will learn how to use Google Chrome's Developer Tools to inspect an element, modify CSS, and preview CSS changes in your browser.","og_url":"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-edit-css-using-google-chrome-developer-tools\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2018-04-30T20:18:02+00:00","article_modified_time":"2025-06-12T20:55:19+00:00","author":"InMotion Hosting Contributor","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"InMotion Hosting Contributor","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-edit-css-using-google-chrome-developer-tools\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-edit-css-using-google-chrome-developer-tools\/"},"author":{"name":"InMotion Hosting Contributor","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5fbfcaed32a2672fb83ab312f5b7237b"},"headline":"How to Edit CSS Using Google Chrome Developer Tools","datePublished":"2018-04-30T20:18:02+00:00","dateModified":"2025-06-12T20:55:19+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-edit-css-using-google-chrome-developer-tools\/"},"wordCount":629,"commentCount":0,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"articleSection":["Google Tools"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-edit-css-using-google-chrome-developer-tools\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-edit-css-using-google-chrome-developer-tools\/","url":"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-edit-css-using-google-chrome-developer-tools\/","name":"How to Edit CSS Using Google Chrome Developer Tools | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"datePublished":"2018-04-30T20:18:02+00:00","dateModified":"2025-06-12T20:55:19+00:00","description":"In this guide, you will learn how to use Google Chrome's Developer Tools to inspect an element, modify CSS, and preview CSS changes in your browser.","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-edit-css-using-google-chrome-developer-tools\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-edit-css-using-google-chrome-developer-tools\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-edit-css-using-google-chrome-developer-tools\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"How to Edit CSS Using Google Chrome Developer Tools"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support & Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5fbfcaed32a2672fb83ab312f5b7237b","name":"InMotion Hosting Contributor","description":"InMotion Hosting contributors are highly knowledgeable individuals who create relevant content on new trends and troubleshooting techniques to help you achieve your online goals!","sameAs":["https:\/\/www.linkedin.com\/company\/inmotion-hosting\/","https:\/\/x.com\/https:\/\/twitter.com\/InMotionHosting"],"url":"https:\/\/www.inmotionhosting.com\/support\/author\/john-paul\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":{"id":4322,"name":"Google Tools","slug":"google-tools","link":"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/"},"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/4494","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=4494"}],"version-history":[{"count":2,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/4494\/revisions"}],"predecessor-version":[{"id":130472,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/4494\/revisions\/130472"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=4494"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=4494"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=4494"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}