How to override inline CSS

Inline styles can be so annoying when it outputs results that you don’t want. Fortunately, CSS is powerful enough that it provides you with a super technique that can help you override inline CSS.

If you use WordPress very often, you then must have at some time been in a situations where a plugin forces an inline style into your theme. In this situation, there are only 2 things I believe you can do to solve the problem. You can delve into the plugin code and rewrite the command that executes the style or override it in your CSS document. If you don’t want to break your website by messing with the core files , here’s an example of how you can override inline CSS.

1. Find out the ID or Class of the troublesome element and then do the following
In this case the ID of the element in question is #why-trouble-me.

Create a replica of the form below in an HTML document.

<div id="why-trouble-me" style="background: black; color: white; padding: 10px;">
This DIV is a pain in the neck but we will find out whose boss
</div><!-- End Why Trouble Me -->
ā€‹ā€‹

Now view your work so you’ll notice the difference by the time you add the CSS below to your HTML document or external CSS document.

Add the example below to your CSS and check your work.

#why-trouble-me {
    background-color: green !important;  /* Changes the background from black to green */
    color: black !important; /* Changes the text color from white to black */
    font-weight: bold;
}ā€‹

Go to my fiddle here to see a working example. In fiddle, Cut out the block CSS code above and then click on run to see what happens when the CSS is absent.
Note: The inline CSS takes effect because of the absence of the CSS you cut off. Paste it back and click on run again.

Before we continue, look at both the CSS and the HTML carefully.

Okay, let me explain how we were able to override the inline style. As you can see, the second and the third lines end with !important; but the fourth line doesn’t. The 4th line will execute without !important because it’s not conflicting with any other whereas the background and color both need !important to override the inline style.

That’s pretty much it. If you have any question or suggestion please express yourself. Thanks

Leave a Reply