Adding CSS to a side bar on a wordpress page. Need advice for shorter code

Are you able to change the styles of the buttons from your child theme .css file? Or did you write directly in the HTML file because the .css file was having no effect?

Two things about how to figure out which styles win in a "style this element" battle:

1. The style loaded last wins... at least when you're using the same specificity of a selector (e.g. ".my-class ul" v. ".another-class ul"). If this is in a child theme, that should already be loaded after the base theme styles.

2. The more specific selector wins. If you have a fight between ".my-class ul li a" and ".my-class ul a", the first one will win, because it's more specific, even though they're both targeting the same a elements.

If you can find where in the original theme these buttons are being styled, you can copy the selector they used for your own child theme stylesheet. I used Chrome's Developer Tools to do some investigation.

1. Open up your page in Chrome and right click on the element you want
2. Click on "Inspect Element"
3. The dev tools panel should open at the bottom of the page. You should be on the "Elements" tab, with your element highlighted on the left (a class="et_pb_promo_button et_pb_button "). On the right is your styles applied to that element. You should see your inline styles right at the top: a teal background and white text color.
4. Uncheck the boxes next to both of those styles. Your button will revert to its old colors: orange background with gray text.
5. Scroll down the styles until you find the orange background box. It should be checked, with no strikethrough. This is what you need to override.
6. Scroll back up to the top of that super-long list of selectors that the orange is referring to. The one that's not grayed out is the one you want.
7. Repeat steps 5-6, looking for "color: #666".

All the changes you make in the dev tools panel will disappear when you refresh the page, so feel free to poke around. :)

Based on what we found in our investigation, try putting this in your child theme .css file:

body .et_pb_button {
    background-color: #4EB1BA;
} 

.et_pb_widget a {
    color: white;
}

If that doesn't work, or if these styles now affect more buttons that you didn't mean to change, try making them more specific, like so:

body #text-12 .et_pb_button {
    background-color: #4EB1BA;
} 

#text-12 .et_pb_widget a {
    color: white;
}

Let me know how it goes. :)