How to Use Stylebot to Manipulate CSS on the Fly

Over the last few weeks, we discussed how learning CSS would positively impact your web design efforts. Intrinsically tied to web design, CSS is a living language that is always being developed and improved upon. This improvement flows into the web browser which must also stay up to date so that it can keep interpreting CSS commands.  

Last week, we explored one of the most useful tools in modern day web design: the web browser’s Developer Tools console. This helped us take a closer look at the underlying CSS of a page. We also used the same console to make temporary CSS changes to a webpage. These temporary changes only reflected on the front end of the page, as a preview of sorts, and served as a mini-guide that would let you to experiment with CSS styles before updating your website’s style sheet.

This week we’re introducing you to one more exciting, totally free, tool that’ll help you further your CSS journey: Stylebot.

Note: To use Stylebot, you’ll need to have Google Chrome installed.

What is Stylebot?

Stylebot is a tool that can be used in conjunction with the Chrome browser to help web designers write better CSS.

Stylebot lets the web designer target a select element on a webpage, and then add additional CSS. In some cases, certain commands will override the current CSS on the page.

As a quick example, in the image below, we’ve selected the paragraph text (in the <p> tag). Using Stylebot, we have changed the default black color to red by writing p { color:red; } in the Stylebot console.

  • Google+
  • Facebook
  • Twitter

The instant feedback we get when using Stylebot to make a CSS change means that we developers can rapidly adjust the look and feel of a webpage or website.

Once these rapid changes are complete, and we’re happy with the new look and feel of a webpage, we can then implement the changes by adding them into either the style sheet of the website’s child theme or the Custom CSS console found in the Divi Theme Options tab.

How to Install Stylebot in Google Chrome

Before moving forward, we’ll take you through the process of installing Stylebot into your Chrome web browser.

First, open up Google Chrome, navigate to the Chrome web store, and click install.

  • Google+
  • Facebook
  • Twitter

Once installed, a small, greyed-out, icon labeled CSS will appear in your Chrome browser’s toolbar.

  • Google+
  • Facebook
  • Twitter

With Stylebot all set up, you’re ready to begin making changes to your website.

Using Stylebot to Experiment with CSS

To start using Stylebot, open a webpage that you’d like to do some CSS testing on. In this example, we’ll use a local test site and will experiment with padding, font sizes, and a few other aesthetics.

Once you’ve reached the webpage, click on the CSS icon your toolbar, select ‘Open Stylebot’. Now you should see a new sidebar console.

When the arrow button is highlighted blue as per the image example, it indicates that Stylebot is in ‘Select’ mode. At this point, Stylebot is waiting for you to click on an element in the webpage to start making changes.

If you don’t see this sidebar when you open Stylebot, use the standard selection options when clicking ‘CSS’ in your toolbar. Here, choose ‘Options’ and then set the Default Editing Mode to ‘Basic’.

Once you click on an element on your page, whether it’s a single word, a button, or an element that isn’t explicitly visible (such as a Divi section, row or module) the arrow’s background will change from blue to grey. When selected, the CSS name of the HTML element will appear in the Stylebot console.

In our example, we selected a word within the paragraph text. Here, Stylebot signals that we’ve selected a div with the class name of .et_pb_text_inner and the element type of <p>.

There is some really important information displayed right here. I can get rid of the ‘div’ but the other two sections have some meaning. We’ll cover more on this later.

Now that we have the paragraph section identified, its time to make some changes.

The easiest way to start is by playing around with the various buttons and input fields in the Stylebot console. For the first example, we’ll make the following changes:

  • Increase the font size to 20px
  • Increase the line height to 20px
  • Change the font weight to bold

Try this yourself and watch as these elements change before your eyes.

Continuing this demonstration, we can change the font color to red. When doing so, a color pop-up box will display. Here, select a hue of red that you like and hex code will be reflected.

Once complete, the webpage should look something like this:

Next, navigate to the buttons at the bottom of the Stylebot console. The buttons, Edit CSS, Undo, Reset and Reset Page are pretty self-explanatory. At this point, click on ‘Edit CSS’ and you should see something like this:

Based on the variables you’ve entered in the console, Stylebot will automatically construct the CSS for you. Now you can simply copy and paste the code into your style sheet or Custom CSS console.

Now you have the basic CSS in front of you,  you can make additional changes to the code to match your desired aesthetic. In our example below we have:

  • Changed the text color from #e3263f to #c12c2c,
  • Decreased the font size from 20px to 18px, and
  • Removed the bold effect by deleting the font-weight declaration altogether

Now the Stylebot CSS compiler will look something like this:

Pressing the ‘Save’ button at the bottom of the Style sheet window will save this locally. When you exit from Stylebot, you will notice the CSS icon in your toolbar will be green.

This indicates that Stylebot is using a style that you’ve created to change the look of the current page you are viewing.

Note: it is good practice to clear Stylebot after you are finished testing otherwise you might think your changes are working when they are really just local.

How to Add Stylebot Changes to your Website’s Style Sheet

Once you have played around and are happy with the new changes, you’ll need to add this code to your website.

If you are not using a child theme and are simply entering style updates into the Divi Theme Option’s Custom CSS console, simply copy the compiled styles and paste them into the console.

If you are using a child theme for your Divi website, there are two options to update the style sheet.

  • Use an FTP agent such as FileZilla or Cyberduck
  • Edit the style.css file in the Appearance > Editor console

If you’ve opted for the FTP route, you’ll need to transfer the style.css file from your web server to your desktop. Here you can open the file and enter the new CSS code. Once complete, save the file and transfer the updated file back to the server.

To help you identify your CSS edits easily, you can add a comment above the code that explains what the edit entailed. To add a comment to your style sheet, use /* to begin, enter the relevant text, and close the comment with */ . Comments will not have any effect on the code itself.

The image below is a screenshot of the portion of the style sheet with the new code added. As a note, you can see that we have removed the ‘div’ declaration from the front.  This now limits our change to any paragraph <p> tag within a class of .et_pb_text_inner.

  • Google+
  • Facebook
  • Twitter

If you edit the style.css file in the Appearance > Editor directly, be extra careful with your syntax and make sure that you don’t upset the ‘punctuation marks’ of the styles. Eliminating a single semicolon or similar can offset an entire style sheet and may cause the front end to display incorrectly.

Note, the Editor area may be hidden if you have a security plugin activated.

Things to Be Aware of When Making CSS Changes

There are a few things that you need to be aware of when making changes to your website’s CSS.

  • Caching. If you have a caching plugin installed, you will most likely need to refresh it in order for the changes to reflect. It is likely that your browser cache will also use a locally stored copy, so remember to clear your browser’s cache as well (<ctrl> F5 for Windows or <command> R for Mac).
  • Specificity. In some cases, there will be other lines of code that may override your newly compiled CSS. This situation is due to CSS specificity. In the Divi Space course, Transforming Divi with CSS and JQuery, we explain CSS specificity in detail. If need be, you can add the !important declaration to a line of CSS that is not reflecting. Declarations such as !important (why they exist, when to use them etc.,) will also be covered in the online course.
  • Google+
  • Facebook
  • Twitter
  • Google+
  • Facebook
  • Twitter

If you still can’t see your change coming through, then its time to open up the browser’s Developer Tools and take a closer look at your element(s). This should show you where an element is being over-ridden by a command with higher precedence (specificity). You may discover that you are targeting the incorrect element, or that your CSS is not being loaded at all.

Note: One of the core philosophies that we’re aiming to teach in the Transforming Divi with CSS and JQuery online course is to give Divi users the ability to understand how to approach a problem when one occurs.

In the course, we’ll cover enough of the fundamentals of CSS so that you’ll be able to identify rather quickly why most CSS updates are not reflecting. For more complicated situations, we’ll equip you with the knowledge of how to go about troubleshooting a problem and researching various fixes.

A Basic Overview of CSS Specificity

How specific you are when identifying an element in CSS gives it weight. The more specific the CSS, the more weight it has.

In the image below, if we were to simply target the <p> tag, then we’re not being very specific, and instead of simply changing one section of paragraph text, we’ll end up changing the entire website’s <p> style.

If we revert back to our previous example, in which we identified the paragraph text in conjunction with an element that has the class of ‘.et_pb_text_inner’, then we give the element more weight.

This lets the browser know that we’d only like to apply the stylistic changes to the paragraph text that has the class of ‘et_pb_text_inner’ assigned to it. In the event that more than one paragraph text has the same class, then both <p> tags will receive the same style.

Any style rules set for <p> will be overridden when the <p> paragraph exists within the class of ‘et_pb_text_inner’.  This is because the combination of our class with the tag has a higher specificity ranking than just the tag on its own.  A higher specificity will win out except where !important is used.

Again, specificity, classes, IDs and much more will be covered in depth in the Transforming Divi with CSS and JQuery online course. Find out more about the online course here.


It goes without saying that with regular practice, you’ll get to where you need to be. To start the journey towards mastering CSS, begin with small changes. Don’t be afraid to play with CSS snippets in a testing or development environment. You can find a number of CSS snippets in the Divi Facebook groups and also in various CSS tutorial-style blog posts. 

When making the various changes, you can always use Stylebot to test out how they work first.

For further reading, have a look at the following sources:

  • CSS Tricks (a go to- for everything CSS – these guides and articles are first class),   
  • W3Schools (invaluable as a reference point for CSS),
  • Codrops (awesome CSS Reference with great examples).

We want to hear from you!

Have you used Stylebot before? If so, what was your experience with this nifty tool?

If you have any questions or feedback, post a comment below. We love receiving your feedback!

Thanks for reading!

Previous post
Next post