• Skip to main content

Victor Font Consulting Group, LLC

The DEX Intranet Specialists

Call Us:

+1 919-604-5828

  • Home
  • Care Plans
    • Care Articles
    • Optional Subscriptions
  • Consultations
  • Products
    • Code Snippets
    • Public GitHub Repositories
    • Gist Snippets
    • Pastebin Snippets (Free)
    • Free Plugins
  • FAQs
  • Support
    • Graphic Design
  • Contact
    • Speakers
    • Portfolio
  • Resources
    • Free WordPress Video Training
    • Tutorials
    • Articles
    • Cybersecurity
    • EU Referral Network
You are here: Home / CSS / How To Use Your Browser’s Inspect Tool

How To Use Your Browser’s Inspect Tool

By Victor M. Font Jr.
February 4, 20174 Comments

Detective with Magnifying Glass—Public domain image courtesy of pixabay.comA large number of support questions we field on a regular basis ask,

How do I change the CSS for a specific element on a web page?

The answers to these questions can usually be found quite easily if you know how to use your browser's inspect tool. All major browsers these days have a code inspection tool. Viewing CSS is just one of the many functions these tools provide. You can also use them for testing JavaScript and jQuery, or troubleshooting complex network activity like Ajax calls. Truthfully, as developers we'd be lost without them. And while the inspect tool in all of the browsers work similarly, you'll still have to learn the specifics of your browser's tool to understand its nuances. For your convenience, here are links to popular browser developer tool documentation:

  • Chrome DevTools
  • Firefox Developer Tools
  • Microsoft Edge Developer Tools
  • Opera Dragonfly

This tutorial will use Firefox and focus on how to troubleshoot/test your CSS. Firebug, a once popular debugging extension for Firefox, is no longer being actively developed or maintained. The Firebug developer now recommends using the built-in Firefox developer tools, of which the CSS inspector is a component. Mozilla offers a developer version of Firefox that contains the latest and greatest tool set. Chrome offers its latest features in Chrome Canary. Be forewarned though, both Firefox Developer Edition and Chrome Canary are bleeding edge browsers with experimental features. Both are considered unstable and may be subject to crashing.

Inspect Tool is a Right Click Away

Image: Right click in browser, click on Inspect Element

  1. To get started, hover over an element you want to inspect and right click on it.
  2. Click Inspect Element

We'll be examining one of the links in this article. The image below shows the result of hovering over the Chrome DevTools link, using right click, and selecting inspect element. The large numbers in the image have been added for clarity.

Image: Inspect Element Window Opened

Wow! That's a lot to absorb. What are we looking at exactly?

  1. Live page in the browser
  2. HTML source code window
  3. CSS window
  4. JavaScript console for testing code (Ignore it for this tutorial)

Windows 1, 2, and 3 allow you to scroll them independently. Windows 2 and 3 are linked so that when you click on an element in the HTML source code window, the CSS applied to that element will display in the CSS window.

In the browser window, the Chrome DevTools link is blue. When you hover over it, it turns black. Look at the CSS on the right, the blue color is applied from a class called .parallax-pro-blue a. This class can be found in my child theme's style.css file at line 2157. In Firefox, the active class is highlighted in blue and the file name and line number at which the class can be found can be seen to the right of the class. Classes that impact hover or other momentary changes, may not be readily visible in the CSS window. For those classes, you have to edit the style sheet to find them.

A really neat feature of the CSS inspection tool is that you can perform non-destructive testing to try different CSS directives for any element on a page. The CSS inspection tool is also an editor. By non-destructive, I mean it doesn't permanently change anything in your style sheet. It only changes things for your current browser session. You can experiment with padding, margins, colors, or any CSS directive you'd like. If you make a mistake or don't like the results, simply refresh the page in the browser and everything returns back to normal. Once you've tweaked the CSS exactly as you want it, copy your changes to the style sheet in your code editor and save it.

  • 12shares
  • Facebook0
  • Twitter2
  • Pinterest6
  • LinkedIn4
  • Print
  • SMS0

About Victor M. Font Jr.

Victor M. Font Jr. is an award winning author, entrepreneur, and Senior IT Executive. A Founding Board Member of the North Carolina Executive Roundtable, he has served on the Board of Advisors, of the North Carolina Technology Association, the International Institute of Business Analysis, Association of Information Technology Professionals, Toastmasters International, and the North Carolina Commission for Mental Health, Developmental Disabilities, and Substance Abuse Services. He is author of several books including The Ultimate Guide to the SDLC and Winning With WordPress Basics, and Cybersecurity.

Reader Interactions

VictorFont.com runs on the Genesis Framework

Genesis FrameworkThe Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple—start using Genesis now!

Click here to download The Genesis Guide for Absolute Beginners (PDF - 1.4 MB)

Leave a Reply Cancel reply

Your email address and website will not be published. Required fields are marked *
Posting a comment means that you agree with and accept our Comment & Product Review Policy

Comments

  1. Annamarie Pluhar

    January 20, 2019 at 4:46 pm

    Thank you. I hadn’t realized that there was a tutorial at Chrome. I dip into working on my website at intervals separated by years so getting back up to speed on CSS is always a trial. This was most helpful.

    Reply
  2. Sarah88

    March 29, 2017 at 5:45 am

    Hi Victor,

    I have a question that i think lots of newbie like me would like to ask: how to get the image link if it’s not in <img tag? Please have a look my screenshot : http://imgni.com/i/oo40

    Reply
    • Victor M. Font Jr.

      March 29, 2017 at 8:22 am

      You didn’t drill down far enough in the example you provided. What you are looking at is not an image, it appears to be a custom icon font. If you open the span, you’ll see what’s known as a pseudo element. In this case, it’s the before element:

      <div class="img alignleft one-fourth first">
      <span class="icon-bubble">
      ::before
      </span>
      </div>

      You can learn more about pseudo elements here: https://www.w3schools.com/css/css_pseudo_elements.asp

      If you inspect the before element, you’ll see this css:

      .icon-bubble::before {
      content: "\24";
      }

      [class^="icon-"]::before, [class*=" icon-"]::before {
      font-family: "studiopress" !important;
      font-style: normal !important;
      font-weight: normal !important;
      font-variant: normal !important;
      text-transform: none !important;
      speak: none;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      }

      This code is displaying a specific icon font from a custom font family named studiopress. There is no image.

      Reply
      • Sarah88

        March 29, 2017 at 10:44 am

        Sorry for overlooking, now i understand it correctly, thanks.

        Reply

Call: +1 919-604-5828

Send us an E-mail

Accessibility Statement | Affiliate Marketing Disclosure | Capability Statement

Cookie Policy | Comment & Product Review Policy | Privacy Policy | Site Map | Terms & Conditions

Copyright © 2003–2023 Victor M. Font Jr.

Return to top of page