DiviTwist.com Logo

A Refreshing Twist of Tools, Tips & Tricks for Your Divi Site

Inspect CSS: How to Exploit the Secret Power Hidden in Your Web Browser

Mar 10, 2022

Inspect CSS: How to Exploit the Secret Power Hidden in Your Web Browser

Did you know that you can inspect the CSS and HTML of a website from within your web browser? Not only that, you can view and test out JS code, view the fonts used, check accessibility and more! You can make tiny adjustments to a page to see how it will look. You can also find errors in your code that need to be fixed. It’s super easy and super helpful when troubleshooting a site.

Tools Beyond Browsing

Most of us don’t really look into what’s beyond the browsing capability of the browser. We open it up, search, and find our answer… well, we sometimes find our answer. Did you know that a browser can do much more? Here are a few things it can do:

  1. Open and view text (like HTML and CSS), pdfs, and image files
  2. Test/run some types of code
  3. View the code that makes up your page
  4. Test site style modifications
  5. Get the hex code for a color on a page

I’m going to go over how to view the code that makes up a page, and how to test changes to styles.

To Inspect CSS, Open the Inspector

For years, Mozilla (Firefox) has had developers in mind when it comes to their browser. This, along with their stance to protect peoples’ privacy, is why Firefox is my preferred browser. Mozilla has paved the path for other browsers in the ways of development tools. So, it’s no surprise that several browsers have the same or a similar process to access these tools.

In order to inspect CSS and HTML on the page, start by opening your browser on your computer.

At this point, if using Firefox, Chrome or Safari, you can just right-click and select Inspect. In Firefox, Chrome, Safari, Edge, and Internet Explorer, you can also hit F12 (or Fn + F12 on some keyboards).

Inspect Element

If this doesn’t work in Edge, you’ll need to turn on inspections.

  1. Type
    about:flags
        in the address bar.

     

  2. In the dialog box, click the check box for “Show View Source and Inspect Element in the context menu”.

Then all you need to do is right-click and select Inspect Element.

You’ll notice that a window opens up at either the bottom or side of the browser.

Inspecting the Element

There are several tabs located in the window, but we want to use the Inspector.

The Inspector window is split into two or three parts, depending on the browser. The first is the page HTML. The second defaults to the styles (Rules) for that highlighted HTML portion. In other words, when you highlight the HTML in the Inspector pane, the second pane shows you which CSS (styles) are being implemented.

You can now click on any part of the website’s HTML in the Inspector window and see its corresponding CSS. You can also highlight a portion of the actual page, and right-click >> Inspect it to open the Inspector to that line of HTML.

Inspect CSS Element Console View

Testing CSS Modifications

You can now click in any of the styles and modify them to see how that setting affects the element. Try changing a font-size to 2em or 30% to see an example. You can also uncheck the check boxes to see what happens if you turn off the element entirely. There is also an element area at the top of the CSS pane that looks something like:

element {
}

or

element.style {
}

or

Style Attribute {
}

This area is specific to the HTML highlighted in the left pane. To see how a change to only that element will effect the page, click on it and add a property:value pair between the brackets in the following format:

    property: value; 

such as changing a color to #506621:

element { 
    color: #506621; 
}

If you don’t know the available options for that element, you can delete a value and use the up or down arrow on your keyboard to see your options. If there is more than one option, and you need help learning the properties and what is available, you can use W3 Schools to see what options are available.

The problem with using the element area is that it doesn’t tell you what class or id is being modified. So there is another option in Firefox and Chrome, a plus button in the top right of the CSS pane. Click it and it will give you an area to work with that specifically contains the CSS class or id you are working with. In Safari, go ahead and use the element area, and when you are done you can click the “E” icon and copy all of your changed code, including the class or id.

Once you figure out what you want to change, you can literally copy and paste the code into your CSS file, or Divi Options Custom CSS area.

Now you know how to inspect the CSS of a webpage using your browser, as well as test out CSS modifications. This secret power of your browser should help save you time when building and troubleshooting your site.

Elaboration and Collaboration

Check out the Divi Twist Forums

0 Comments

Submit a Comment

Your email address will not be published.