Forum Moderators: not2easy
The HTML code i give them uses inline CSS, for example:
<a href="http://www.example.com/" style="font-family: arial;">
The PROBLEM is that the HTML code with inline styles that i give them inherits or is overridden with the styles already on that person's site.
Is there a CSS property which i can add to my inline CSS, which tells a web browser NOT to inherit any other CSS rules?
And yes, i know i can overcome it with specificity but that means i have to try to think of every CSS property and value a website could possibly use and add it to my inline style - which makes the code HUGE and takes for-ever!
So i just basically want some sort of property which says to the web browser "do not apply any CSS styles to this HTML tag besides the ones which are specified in the inline style already"
....if it's possible?
Do you have any solutions. Please help
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<style type="text/css">
a { font-size: 200%; font-family: times,times new roman, sans-serif; }
</style>
</head>
<body>
<p><a href="#">A link</a></p>
<p><a href="#" style="font-size:100%; font-family: arial, sans-serif;">A smaller link</a></p>
</body>
</html>
You can use the !important rule to force one to dominate over another but it shouldn't be necessary. more information [w3.org].
font-family:arial,sans!important;
As far as I know the problem isn't in the existing styles OVERRIDING the inline styles, it's that the existing styles ADD OTHER styles.
It wouldn't make much sense if the inline styles weren't overriding the inline styles, since that's the priority CSS is rendered in browsers.
example: lets say span.wacky1 has italics and bold set inline on the page, but in the stylesheet also has like background-color:red or something, right?
A way to deal with that, just delete all the IDs and Classes given after each tag that you want not affected.
I would really not reccomend that though, I would recommend you move away from inline styling, and just edit the stytle sheet.
If you really wanted to keep the inline styling (at least for now), just remove the previous stylesheet (or just the PARTs form it) that was given that you didn't want to take effect!
I must be missing some info here, because it doesn't seem like your answer is that simple, but based on the way it was explained, that's my answer.
You can't expect background:red to be removed form an element's style just because you set it's inline style to font-weight: bold; font-style: italic;
that wouldn't make much sense. The way you'd tell it to ignore other styles, is to simply REMOVE the stylesheet that's giving those other styles.
In summary, my best guess of your situation would be that you'd want to delete the classes and ids on some of the specific tags, that way the styles won't affect them. You could also delete their deinitions in the stylesheet too, but tha'ts only if you didn't want ANY of the styles for those ids/classes to take effect, not just some random ones.
[edited by: Xapti at 9:36 pm (utc) on Aug. 26, 2007]
The main problem is that the external stylesheet adds other styles to my inline style.
So for example, if the webmaster has a stylesheet that says all links should have 5px of left padding, then my link inherits it to. :-(
It means i have to counter it with style="padding-left: 0;"
But since i am giving the HTML code, with the inline style, to other webmasters to put on their own sites - it would mean i would have to counter every known style in existance.
Some people suggested i CHANGE the external stylesheet - but i dont have access to it and i CANNOT ask the webmaster to change it. This is just the way it is.
I guess there is no way around it.
Another option which I assume you should be able to do (but you have very strange constraints), is to set a block of CSS in the header (inside a STYLE tag) with the new styles. The styles will have to overwrite the old ones still. such as a{color:blue} would have to be overwritten by a{color:red}, but the difference here is that you won't have to write it 10 times over if you have 10 links, like the current inline method you are using.
But for whatever reason, even if you're in that silly (no offence) situation without much hope, you could still probably get that "use only this style" effect with javascript. I don't deal with it much though, so I coudln't give sample code. The problems with it is that it would likely override any user stylesheets too (not good), and wouldn't even work for peope who have javascript disabled.
[edited by: Xapti at 2:31 am (utc) on Aug. 27, 2007]
