If I'm not mistaken each element inherit style from it's parent element, unless new style specified in the child element.
So, what you need to do is either don't use "global" style for elements (i.e. DIV {...}, TABLE {...}) but use custom classes for each element.
Also, if you "have to" use global style, you can create a custom classes and use them to override global style.
Take a look at this example:
<head>
<style>
BODY{
background: #F9F8D2;
color: green;
}
DIV{
background-color: red;
color: blue;
}
.custom_div{
text-decoration: line-through;
}
.custom_div2{
background-color: transparent;
color: black;
}
.custom_div3{
background-color: white;
color: black;
}
.custom_div4{
background-color: inherit;
color: inherit;
font-wieght: inherit;
}
</style>
</head>
<body>
<pre>
Text without DIV:
BODY{
background: #F9F8D2;
color: green;
}
<div>Text in DIV without class specified. This is "global" style for background and text color for all DIV. All DIV will use this style unless overriden.
DIV{
background-color: red;
color: blue;
}
</div>
<div class="custom_div">Text in DIV with custom_div class, colors are used from "global" style for DIV:
.custom_div{
text-decoration: line-through;
}
</div>
<br />
<div class="custom_div2">Text in DIV with custom_div2 class. Since background color is "transparent" it will be the same as in parent, in this case as in BODY:
.custom_div2{
background-color: transparent;
color: black;
}
</div>
<div class="custom_div3">Text in DIV with custom_div3 class. This class overrided background and font colors from "global" style for DIV:
.custom_div3{
background-color: white;
color: black;
}
</div>
<br />
<div class="custom_div4">Text in DIV with custom_div4 class:
.custom_div4{
background-color: inherit;
color: inherit;
font-wieght: inherit;
}
</div>
</pre>
<br />
<div><div class="custom_div3">Text in DIV with custom_div3 class inside a DIV without any specific style class (uses global DIV style)</div></div>
<br />
<div><div.custom_div4>Text in DIV with custom_div4 class inside a DIV with "global" DIV style</div></div>
</body>
