css editing

You don’t need a plugin when the Developer Tools is built in to the major browsers (not on mobile browsers). It’s usually F12 on the keyboard, or Inspect Element from a context menu.

Hi @gerardphilippe,

Chrome and Firefox dev tools as @joyously mentioned are great for finding the selectors you need to work with. You can also edit HTML and CSS in near real-time while in the browser.

I think WordPress’ Appearance > Customize > Additional CSS is a pretty good option. Unfortunately, the editing experience is very “narrow”.

Have you tried Elementor? It’s a full-on page builder. I only use Elementor occasionally when I need to support a site that’s built with it. I think the live preview works pretty well when editing CSS.

I’ve seen this premium plugin come up on my radar a couple of times. I’ve never tried it.

https://www.csshero.org/

Good luck!

thanks for your help I also often use the browser class development tool to troubleshoot. But often when I do my tests in the inspector everything is ok but when I get the class in WordPress often the modifications pass, often not. I don’t know if it’s on my side, maybe I’m doing it wrong with the css.
Thank you for your answers if you also have resources to help me customize the css code from the WordPress browser development tools I’m interested.
thanks

When you find a rule that works in the dev tool but fails to effect change when implemented in a CSS file, it’s because something else is overriding the rule you added. You’ll still see your rule in the dev tool, but it’ll be lined out since another rule is overriding. This usually means your rule needs to be applied later in the loading process.

Much of the time, by adding rules to the customizer’s Additional CSS panel, you will override any other equivalent rules because rules there become inline rules on the page. Other factors being the equal, inline CSS takes precedence over external files.

The only thing that has more precedence than inline are element styles. Element styles are normally a bad practice, but if you’ve failed with other methods it’s an option of last resort. In rare instances, JS script will set element styles. If this happens the only recourse is to either alter the script or override the JS function with your own version.

@bcworkz gave a little bit of how CSS works, but it’s not quite accurate. He used “inline styles” to denote CSS that is in the page, but that term is usually for what he is calling “element styles”. Whether the style is in an external file or in the page has no bearing on whether it takes precedence.

CSS depends on the Cascade of rules overriding each other because of their order and specificity. So you can put the same rule in your CSS file or in Additional CSS, and it will work differently because the Additional CSS is always output last by WP. For two rules using the same selector, the last one wins. But you can make a rule’s selector more specific, and it will override a later rule.

This means that putting styles into the style attribute of an HTML element is always “last” and more specific than any other style. Most references call this “inline styles”, and it is not recommended for anything you expect to change at some later time because it overrides all other styling.

Ah, okay, no worries. Thank you for your explanations. It’s a bit fuzzy for me but I understand better how it works. I think I have to master a little bit the css rule with classes and IDs.