Making individual changes in multiple widgets

I have successfully used the following CSS code to modify the text in the Front Page Parallax Widget:

.image-bg h3, .image-bg h1 {
color: #6e6e6e;
font-family: Georgia;

However, if I add multiple Front Page Parallax Widgets, this code seems to modify the text in all of the widgets in the same way. So, my question is: how can I use CSS code to make specific text changes to individual Widgets, so that each widget has potentially different font size/family/etc? Thank you.


Hi, just an update: I seem to have solved the problem in the following manner, being very new to CSS:

  1. Right click on the text I want to change, select “Inspect Element”

  2. After viewing the code in question, I added the following CSS code to the “Custom CSS” section of the theme:

div#shapely_home_parallax-23 h1 {
color: #ffa500;
font-family: Arial;
font-size: 48px;

My question is: would this be the preferred/most robust approach to solve this issue? If you were to go about this in a different manner, would you be so kind as to enlighten me on your method? I am a complete beginner with CSS, so any input is much appreciated. Thank you very much!


Hi DJ,

Awesome great to see you got that solved.

You have done it correctly.

Please advise if you have more questions.

Have a fantastic day!