Inline CSS styles are a deprecated bad practice that should be avoided whenever and wherever it's possible. However, many web sites that provide widgets, plugins and gadgets for other sites use them very often. They're a quick-and-dirty solution that avoids the use of external style sheets. The major drawback of this approach is that styles are attached only to the element where they appear and nothing more. The problem with inline styles is that they have an higher specificity than normal styles. In this post I'll show you a couple of techniques that you can use to override them.
JavaScript and CSS inline styles
Inline styles are contained within the style attribute attached to an element:
<p style="color: green">Test</p>
The above example shows pure CSS inline styles, that is, styles attached directly in the markup. But there are also JavaScript inline styles:
var p = document.getElementsByTagName('p')[0];
p.style.color = 'green';
For a browser, both approaches are equivalent, in the sense that they operate on the same style attribute which, in the DOM terminology, is an object attached to any member of the HTMLElement interface.
Results are the same: both styles have an higher priority and specificity than normal CSS styles.
Overriding inline styles
There are three method to override inline styles:
- the
!importantstatement - cascading
- cascading and the
!importantstatement
1. The !important statement
This is the easiest way to override inline styles. This method is useful when inline styles are simple:
<head>
<style>
p {
color: black !important;
}
</style>
</head>
<body>
<p style="color: green">...</p>
</body>
2. Cascading
This method is a little bit more complex and it requires that you increment the specificity level of your selectors:
<head>
<style>
html body p {
color: black;
}
</style>
</head>
<body>
<p style="color: green">...</p>
</body>
3. Cascading and the !important statement
This is the most effective way to override inline styles:
<head>
<style>
html body p {
color: black !important;
}
</style>
</head>
<body>
<p style="color: green">...</p>
</body>
hmmm...like it
i see i see
thanks bos^^
I recently have the problems loading my css into my facebook iframe tab. I will attempt to use this method. Thank you.