About this:

With this guide you may start using custom CSS the right way. This guide will only get you to start targeting the right elements with the developer tool. That being said. This is not a full CSS guide. It will merely explain how to use the developer tool to target your elements.

Purpose of the developer tool

The developer tool shows the HTML on the page which you can then use to target your styling at. To know which element to style it will require some trial and error. Good to know that CSS will not do permanent damage if done wrong. Just remove the CSS and start again.

Before you begin

Basic understanding of element hierarchy and logical thinking will give you the edge in understanding what to style. Most of it will be solved by trial and error and the element inspector is clear in most cases but it’s common sense to know that if you want to style a button, you have to style the button class and nog the span within. This last sentence may just have been an alien language for some of you, but it will make more sense in the example below.

How to use

Right click on an element you wish to style and select “Inspect” to open the developers tool focused on that specific element. For this example I wish to style this button. Right clicking it opens the HTML which should look something like below.

Pro tip: Notice how the ID’s have numbers. These are automatically generated and should not be used to style as they can change.

Select the <a class="button primary">. You will see all the styling appointed to this element within your styles tab as shown in the image. The first which shows element.style { and can be used to add CSS to test on an element.

Pro tip: Keep in mind that pseudo attributes (:hover, ::before, ::after, etc.) can NOT be used in the developers tool.

Now when you’ve tested your styling you can place the required CSS in your Custom CSS field which can be found in:
Appearance > Customizer > Style  – OR-
Flatsome Advanced > Custom CSS

We shall continue the example with CSS below.

How to CSS

In the last chapter we checked the class and tried our CSS. Let’s say we want to style our button red. We know that our button is blue as the previous screenshot has shown that background-color is #28bccd. The developer tool conveniently shows a blue square. We also know that the button is:<a class="button primary">.

As you can also see in our last screenshot, you will see that our button is highlighted black. Meaning the styling for the background color is used on: .button.primary:not(.is-outline) .

Pro tip: Along the way you’ll notice that these classes are linked to settings in the UX Builder. Like selecting primary or secondary color or using outline button or default.

So here is when the logical thinking gets the edge. Technically the developers tool gave us all the things needed to style our button: we now know which element to target as it’s highlighted (.button.primary:not(.is-outline)) and we know what styling to use as it’s currently blue and we want it red (background-color).

In case you had not figured it out, the styling will be as follows:

.button.primary:not(.is-outline) {
    background-color: red;
}

You can use hex-codes ( #ff0000 ) or rgb/rgba ( rgb(255,0,0) ) codes as well if you need a specific color or opacity. If you wish to use the styling for a specific button, you can give that button a class in the UX Builder (bottom option) and add that to the target CSS. Per example give your button a class “button-red” so your styling will only be added to buttons you gave that class. Your styling will be:

.button.button-red.primary:not(.is-outline) {
    background-color: red;
}

This is how you use the developers tool to select your target and add your own custom CSS. Of course this is extremely basic but you now may have a better understanding on how to target your elements for styling. I thank you for reading and I hope this has been helpful in your custom styling endeavors.

Stay Connected

Get in touch

Flatsome is the perfect theme for your shop, company websites or client websites. It has all the tools needed to create super fast responsive websites with amazing user experience.