Hi,

Generally you can always use the editor view, add a custom HTML class to an element then style this class with CSS.

Like the example below, which has a made-up class="unique-class-name"

Then set the color with CSS (Copy it to Theme Options -> Custom CSS):

.unique-class-name {
    color: red!important;
}
.unique-class-name:hover {
    color: purple!important;
}

And you have the result (bottom example is on hover):

Some of color classes are alredy defined and you don't need to write CSS for them, for example, if you want it to be the theme primary color, you can use the "primary-color" class:

Kind regards,

Andrej

Basically, this is because the Widget Styles CSS affects the entire widget. If you want to style a specific element inside the widget, you need to use a class.

Adding the code to Theme Options also allows you to style more widgets at once, so you don't need to add the same CSS over and over again. Just use the same class anywhere you want this style. 

This is a huge time-saver. If you want to make some adjustments later, you can simply change the TO CSS without the need to edit all widgets separately.

I hope this explains it.

Kind regards,

Timea