{"id":1685,"date":"2022-07-22T20:30:11","date_gmt":"2022-07-22T20:30:11","guid":{"rendered":"https:\/\/knight.domains\/support\/?p=1685"},"modified":"2022-07-22T20:30:13","modified_gmt":"2022-07-22T20:30:13","slug":"getting-started-viewing-and-finding-css-classes-with-web-inspector","status":"publish","type":"post","link":"https:\/\/knight.domains\/support\/getting-started-viewing-and-finding-css-classes-with-web-inspector\/","title":{"rendered":"Getting Started Viewing and Finding CSS Classes with Web Inspector"},"content":{"rendered":"\n

Web Inspector is a powerful tool that lets you view all resources and activity on a web page. This post will guide you through some of the tool\u2019s most useful features and how you can use them to aid in your own web development.<\/p>\n\n\n\n

Navigating to Web Inspector<\/h2>\n\n\n\n

To open Web Inspector you can press Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS). This is what your window should look like when Web Inspector is active:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Selecting a Specific Element in Web Inspector<\/h2>\n\n\n\n

If you wish to inspect a specific element on a webpage to learn more about it, you can simply right-click on the element and select \u201cinspect\u201d.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Locating the Element\u2019s Class Properties<\/h2>\n\n\n\n

When you have an element selected, you can make changes within the web inspector to see how the webpage might appear if edits were made to the element. As you make edits within the inspector, the webpage will give you live updates as to how your changes would appear. Hovering over the code sections in the top right section of the inspector window will highlight the element on the page it\u2019s referring to if you\u2019re having trouble locating a certain element. You may have to expand a section to locate it.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Once you have found it, click on it.<\/p>\n\n\n\n

Under the styles tab within Web Inspector you can view all the CSS properties that belong to the HTML element\/class you have selected. These too be manipulated to affect the appearance of the webpage. Just like hovering on code in the top section of the inspector window highlights that element on the page, hovering over different style elements does the same (pictured below)<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

You\u2019ll notice that the styles tab is segmented into different sections. Editing some of these sections will affect the stylization of just the element you chose to inspect, but adding edits to other sections will affect an entire class that that element belongs to.<\/p>\n\n\n\n

Once you have found the element or class you would like to manipulate, try playing around with the stylization of the elements on your webpage. If you find the class of an element you want to make a permanent change to, you are able to bring that into the \u201cAdditional CSS\u201d tab in the WordPress Customizer to further customize elements on your site. For example, the above highlighted title has its stylizing under the following:<\/p>\n\n\n\n

.elementor-642 .elementor-element.elementor-element-4f9fcd00 .elementor-heading-title{\n\n}<\/code><\/pre>\n\n\n\n
If you want to change that text\u2019s color, you can put the CSS code within that class in the \u201cAdditional CSS\u201d tab and change the element.<\/p>\n\n\n\n
.elementor-642 .elementor-element.elementor-element-4f9fcd00 .elementor-heading-title{\n  color: red;\n}<\/code><\/pre>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
If you\u2019re having trouble finding a class, do not worry. Finding CSS classes can take time and practice. You are always welcome to make a Tech Bar appointment<\/a> if you need additional assistance.<\/p>\n\n\n\n
Additional Resources<\/h4>\n\n\n\n