How To Override A WordPress Plugin’s CSS

If you need to change the appearance or layout of elements within a plugin so that they fit the theme of your website, you’ll find that any custom styling you insert in your style.css is likely overridden by the plugin’s CSS.

You shouldn’t modify the plugin’s stylesheets because on the next plugin update, all the changes you made will disappear and you will have to reinsert your modifications all over again.

There are several methods to overriding the plugin’s CSS; some easy and others complex.

If you only have a few modifications to apply, by far the simplest way to override a plugin’s stylesheet is to add ‘body’ in front of the element you are targeting within your style.css file.  Adding ‘body’ creates CSS specifity to the selector, allowing it to override the original styling.

body .plugin-class {
    font-size: 30px;
}