@outer_net,
As mentioned by @Felixius, CSS is one of those things that while simple on the surface, it can quickly become more difficult to figure out how to get styles overwriting one another if things aren’t structured properly. Always keep the “cascade” in mind when writing CSS. For example, if something is styled using:
ul.custom-selector {
/* styles here */
}
And you try to style it with the following:
.custom-selector {
/* styles here */
}
The second style will not take effect because the weight of the first one is more since it is using the p
tag as part of the selector. There is a bit more to all of this, but this is a really great article you can check out that explains “selector specificity” really well:
Also, at one point your screenshots were showing you using some HTML markup within your CSS. Remember the syntax for CSS references aspects of HTML, but doesn’t mirror it. So if you wanted to style an element <ul class="custom-selector">
with CSS, you would not use that literal tag name in the CSS selector. Instead, you could use the following:
ul.custom-selector {
/* styles here */
}
Finally, where your CSS is being output matters a great deal as well. For example, if you setup your CSS in a child theme as mentioned by @nico and place all your styles in the theme’s style.css
file, if you utilized the same CSS selectors in the page level CSS editors in our tool, that page level CSS would take precedence over the style.css
styles because CSS on a page has a higher specificity.
I just wanted to give you a little more background to take with you while you make edits to your theme. Of course, we are certainly here to assist you should you need anything further, but I just wanted to try and help give you a little more context for making edits when you need moving forward.
Hopefully that all helps to point you in the right direction, cheers!