How to Use Your Browser’s Developer Tools to Test CSS Changes

How to Use Your Browser’s Developer Tools to Test CSS Changes
In an earlier post on the Divi Space blog, we offered a basic introduction to CSS and discussed how learning this syntax will make you a better Divi designer.

For a recap on these topics, read the previous post to understand:

  • What CSS is and how CSS works,
  • A short introduction to foundation CSS principles,
  • Why learning CSS should be a priority if you’re a web designer,
  • Why CSS and child themes go hand in hand, and,
  • Where you can learn CSS for Divi.

As mentioned in the previous post we’ll be opening the doors to our online course Transforming Divi with CSS and JQuery on the 1st of January 2018. If you’re ready upskill and want to learn from the best in the biz, the Divi Space founder himself – SJ James, then stay tuned for more information!

In this blog post, we’ll be showing you how simple CSS changes can be tested/previewed using the extremely handy developer tools that are built into the modern day web browsers.

Testing Simple CSS Updates with Developer Tools

For this demonstration, we’ll take a behind-the-scenes look at the Divi theme to see how CSS can be used to change the look of certain elements.

What follows is not a tutorial so there’s no need to set anything up on your side, simply follow along and feel free to apply the same updates to a page or post of your own!

First, we used the back-end editor to set up a standard section comprised of two rows: a single column with a text module followed by three columns of blurbs and buttons.

After adding a number of headings, some dummy text and a few images, the front-end of the section looks like this:
Now, we’re going to assess these front-end elements a bit deeper to figure out the HTML make up in order to change the aesthetics with CSS.

For this, we’ll be using the web browser’s built-in developer tool.

With most modern browsers, you should be able to right click on a certain web element and select “Inspect” or “Inspect Element” or similar.

  • If you are using Google Chrome, navigate to File > View> Developer > Developer Tools.
  • If you are using Safari you will need to activate the Develop Menu by selecting the check box in Safari’s Advanced preferences, then navigate to Develop > Show Web Inspector.
  • If you are using Mozilla Firefox navigate to Tools > Web Developer and select Inspector from the list.

By default, this should appear at the bottom of the page and look something like this.

While inspecting the web page or a certain element therein, the website/host compiles all of the information together and presents the page as HTML. The main window displays all of the HTML, while the right-hand side window shows the CSS applied to the specific element currently selected.

This entire Section created with the Divi Builder in the back end…

… is represented in a single highlighted section as:
Arrows are used to show and hide groups of elements.

Clicking on the arrow on the left-hand side will expand to show two green rows.  You can see them clearly labeled with CSS Class names.

i.e <div class=“ et_pb_row “et_pb_row_0 ”>

This means that the HTML element, a div, has been assigned the classes of “et_pb_row” and “et_pb_row_0”. Following this element, a second element has been assigned the classes of “et_pb_row” and “et_pb_row_1”.

Now, we can use CSS either to target both rows using the class name of “et_pb_row” or we can target either one of the elements by using the second class name of either “et_pb_row_0” or “et_pb_row_1”.

Before continuing, it’s worth noting a few important things.

If you only want your changes to apply to the rows on this page and not the rows on the rest of your site you will need to be more specific.  

One way to do this would be to assign your own CSS class name to the row that you want to target with CSS.  

To do so, return to the back end of the page, select the Row in question and click on the hamburger menu on the top left-hand side of the green row.

Once selected, click the Advanced tab and enter a unique CSS Class name. In this case I’ve used a prefix which is complex enough to guarantee uniqueness.
Save the changes to the module and page, click preview and assess the front end. Nothing should change in the page itself. Instead, return to the Inspect Element console and view the same element as before. Now you will see an additional Class name – divispace_example_row has been added to the first row.
Navigate to the right-hand side Inspect Element window and you’ll be able to see the new CSS Class name (highlighted here in yellow).
Before going straight to the stylesheet, you can test your CSS changes right in the Inspect Element console to see what effect it will have on your page.  Let’s change the background color to yellow.

To do so, use the CSS section of the Inspect Element tool on the right-hand side, click between the open and close curly brackets “{ }” in the CSS section, type the following code and then hit enter.


Instantly you’ll see your original web page transform from this:

To this:
If you are happy with the change you’ve made to the element, you can copy the entire section of syntax:

divispace_example_row { background-color: yellow; }

And paste it into either the style.css file of your Divi website’s child theme or into the Custom CSS box in the Divi Theme Options console.

If you wanted to add the same style change to another row or module element in your website, you would need to add the same unique class name to the next element.

Using the browser’s developer tools to inspect the HTML elements is a great way to test different CSS properties and play around with different styling until you create an effect that suits your style.

These changes are temporary, and as soon as the page is refreshed, the changes will disappear. Nevertheless, becoming familiar with the browser’s Developer Tools is a great way to explore how a website is constructed and how it can be enhanced aesthetically.

As well as experiment with the CSS on a page of your website by adding, removing or changing a setting, you can also use this handy tool to inspect other website’s elements. Rest assured no one else in the world will see it.

Breaking Down CSS Commands

In the example above, we changed an element’s background color. The CSS is broken down into two parts: the property, in this case “background-color” and the value, “yellow”.

This is but one of the myriad of CSS commands available to web designers to use. For an extensive list of the properties, visit W3 Schools.

CSS is constantly under development, seeing new additions being made all the time. If you’re starting out with CSS, we recommend playing around by testing the effect of various properties and values applied to the Divi Builder modules, and using your browser’s developer tools to assess changes.

We highly recommend playing around on a development or testing site. To set up a development site to play around in, we recommend setting up a local, offline site using Desktop Server.

Next in the CSS for Divi series, we’ll be showcasing another awesome, totally free tool that’ll help your web design skills.

We want to hear from you!

How have you found using the browser’s Developer Tools? What have you struggled with when it comes to CSS and simple site tweaks?

We hope that you enjoyed reading this article and that it has helped you understand a bit more about Divi, web design, CSS style changes and the power of the browser’s developer tools.

Please feel free to leave a comment or question below, we love receiving your feedback, and stay tuned for more information on the Divi Space “Transforming Divi with CSS and JQuery” course!

Thanks for reading!