How To Change Multiple Text Background Colors

My default text background (and the color of the image card text area) is orange, and I need the text backgrounds (and/or the image cards) to be able to change colors. I've attached a screenshot of the areas I want to change. 

Can someone tell me how to do this in CSS so I can change text backgrounds to specific HEX? 

Thanks!

How you go about this depends on how you have it set up. Can you share your website URL?

6 hours ago, Ziggy said:

How you go about this depends on how you have it set up. Can you share your website URL?

@Ziggy It's a hideous hodge-podge of sections right now, so please don't look at the design with a discerning eye!  😂 I'm playing with things for now. But this piece matters for the separate brands. 

Thanks so much!

https://www.peripheralviewmedia.com/

PW: PVMNew

1 hour ago, jenartsquare said:

hideous hodge-podge

No judgement! We all have a process!

I would suggest using CSS like this:

section[data-section-id="63ca1089df490857e5c10fd9"] {
 .sqs-background-enabled:nth-child(1) {
   background-color:red;
 }
 .sqs-background-enabled:nth-child(2) {
   background-color:yellow;
 }
 .sqs-background-enabled:nth-child(3) {
   background-color:green;
 }
 .sqs-background-enabled:nth-child(4) {
   background-color:blue;
 }
}

Using the section ID and nth-child you can set the colours in order and reuse it easily without using individual block IDs.

Hope that works for you!

23 minutes ago, Ziggy said:

I would suggest using CSS like this:

section[data-section-id="63ca1089df490857e5c10fd9"] {
 .sqs-background-enabled:nth-child(1) {
   background-color:red;
 }
 .sqs-background-enabled:nth-child(2) {
   background-color:yellow;
 }
 .sqs-background-enabled:nth-child(3) {
   background-color:green;
 }
 .sqs-background-enabled:nth-child(4) {
   background-color:blue;
 }
}

Using the section ID and nth-child you can set the colours in order and reuse it easily without using individual block IDs.

Hope that works for you!

Thanks, @Ziggy. I appreciate your quick response.

When I insert the code, it does in fact change the nth-child (1) to the red you indicated and all the text backgrounds as well, but when I modify and place the HEX code on that nth-child (1) plus add the corresponding hex color to the other children, there's no change except to the blue on the (1)

I'm sure I'm missing something simple, but here is what I attempted:

section[data-section-id="63ca1089df490857e5c10fd9"] {
 .sqs-background-enabled:nth-child(1) {
   background-color:#1863B6;
 }
 .sqs-background-enabled:nth-child(2) {
   background-color:#9EDC03;
 }
 .sqs-background-enabled:nth-child(3) {
   background-color:#FAF001;
 }
 .sqs-background-enabled:nth-child(4) {
   background-color:#26D1EE;
 }
.sqs-background-enabled:nth-child(5) {
   background-color:#516528;
 }
.sqs-background-enabled:nth-child(6) {
   background-color:#9F1CD3;
 }
}

It looks like this now: