tags:

views:

47

answers:

2

How do I override a child css-property. Example, the text should be black:

<div style="color: Black;">
    <div style="color: Red;">Red text that should be black.</div>
</div>

Since I got some answers that suggest that I should not use inline styles, I should tell you that this is not an option, at least not for the inner div.

+2  A: 

don't use inline styles. control them from your CSS in the tags or CSS file. Then you can use inheritance, specificty and !important to override. You can't do it with inline styles as you have it in your code.

Moin Zaman
Inline styles take precedence over your stylesheet so if absolutely necessary define div{ color: #000; } and div div{color: #a00} and then set color: Black; inline.However, a much better option would be to use CSS in an external file and then assign a specific class to the div's you need to change the color on.
Angelo R.
Updated question.
Andreas
If that's the case then the other option I can think of is to use javascript and do it onload. Should be easy to do with jQuery. removing the style attribute. should do it. eg. $('div div').removeAttr('style');
Moin Zaman
I guess that's the only solution then. Marked your answer as the correct one, because of the comment :)
Andreas
A: 

You should use css classes and ids and use internal or external stylesheets do not use inline style for anything as far as possible. As far as making the text black you cant do it because you have it inline and that has preference over all and will be applied last. It is usually follows this order so the styles are applied starting from left to right-

External Stylesheet -> Internal Stylesheet -> Inline Styling

Look here to know more information on how to use stylesheets.

Misnomer
Updated question.
Andreas