Inline Styles Overriding CSS
Inline styles (the style attribute on HTML elements) have higher specificity than any CSS selector. This means your external CSS rules can't override them, no matter how specific your selector is. The only way to beat an inline style is with !important.
Why It Matters
Inline styles break the cascade, making your CSS unpredictable. When CSS 'doesn't work', inline styles on the element are often the hidden cause. They create a maintenance nightmare where changing styles requires editing HTML instead of CSS.
Code Examples
<!-- HTML -->
<div style="padding: 20px; background: red;">
Content
</div>
/* CSS: this will NOT override the inline style */
div {
padding: 40px; /* ignored */
background: blue; /* ignored */
}<!-- HTML -->
<div class="card">
Content
</div>
/* CSS: works normally */
.card {
padding: 40px;
background: blue;
}How to Fix
- 1Move inline styles to CSS classes. This is always the best fix.
- 2If you can't change the HTML (third-party widget), use !important as a last resort.
- 3For JavaScript-set styles, use element.classList.add() instead of element.style.
- 4Check for inline styles in DevTools: they appear at the top of the Styles panel.
Check Your CSS Now
Our CSS validator detects this error automatically and shows the exact line number.
Open CSS ValidatorHostinger — Fast & Affordable Web Hosting
Deploy clean, validated CSS on reliable hosting.
Related CSS Errors
Overuse of !important
Why !important makes CSS unmaintainable. How to fix specificity issues without it.
Duplicate CSS Property
Why duplicate properties in the same rule cause confusion. When it's intentional vs accidental.
Invalid CSS Selector
Common CSS selector mistakes: missing dots, wrong syntax, invalid pseudo-classes. How to fix them.