The inheritance is avoided by not changing the default styles of the HTML tags. IE if you change the padding for the table tag like so:
table { padding:0; }
all of the tables are going to have a padding of 0 out of the blocks. But, if you use a separate style:
.tablePadding { padding:0; }
It only applies to the object the style is attached to. Anything within the container with the .tablePadding is going to inherit the inheritable values but those values can be adjusted by applying separate styles to the container within the container.
Better explanations and examples can be given if you can provide a snippet that illustrates your exact issue.
Main Topics
Browse All Topics
by: toymachiner62Posted on 2009-07-31 at 11:31:19ID: 24991237
You can't stop css from inheriting styles from the parent elements, but you can give the child elements different styles than the parents.
Example:
<div id="container">
<div id="inside">
<ul>
<li>stuff</li>
<li>stuff</li>
</ul>
</div>
</div>
Now if you have the style
div {
background-color:purple;
} it will set all the divs background colors to purple.
If you have
div {
background-color:purple;
}
#inside {
background-color:white;
}
this will make the background color of all divs purple, but the div with the id=inside will be white.
If you give an html tag an id, you can set the style by using the '#' symbol.
You could also set just the background color of one specific <li> by giving one of them an id="something" and then set the style to
#something {
background-color:purple;
}
Does this make sense?