How to Override Inline Styles via CSS

Nothing is more annoying than coming across inline styles that you need to edit on a website template. Luckily, you can override the inline styles via CSS. I must first note that one tiny mistake can lead to this not working, so make sure to pay attention to the detail and notes at the bottom. Without further ado, here is how:

Example

See the Pen JXepaq by Ryan Rogers (@ryanrogers) on CodePen.1

There are two ways to declare it with CSS (I used the first one):

.feat[style="padding:10px; background-color:#ccc; overflow:hidden;"] {
background-color: #fff !important;
}
div[style="padding:10px; background-color:#ccc; overflow:hidden;"] {
background-color: #fff !important;
}

*** NOTES ***

  • You must include all style declarations within the selector, even if you are only changing one.
  • You must use !important after the value for it to work.
  • Make sure the spaces match. For example, if there is a space in between ‘padding:’ and ’10px’ in the inline styles, then there must be a space in the style declaration of the stylesheet.