Menu
For example I have a div with font color set to purple, some text within the div inherits the color, but some are not, e.g. in a table. (Save below code as test.html and open in the browser for testing)
<div style="color: purple;">
<p>Some text</p> <!-- text here is purple -->
<table>
<tr>
<td>Table cell 1</td> <!-- text here is NOT purple -->
<td>Table cell 2</td> <!-- text here is NOT purple -->
</tr>
</table>
Another text <!-- text here is purple -->
</div>
If I replace the div with body, they DO inherit.
<body style="color: purple;">
<p>Some text</p> <!-- text here is purple -->
<table>
<tr>
<td>Table cell 1</td> <!-- text here is purple -->
<td>Table cell 2</td> <!-- text here is purple -->
</tr>
</table>
Another text <!-- text here is purple -->
</body>
I'd like to know that:
773
Using CSS Reset, or specifically font: inherit means that on browsers supporting the inherit value, all such elements are rendered in copy text font, unless otherwise specified in a style sheet. So this is about a particular methodology (or, as some people might say, ideology or religion) of authoring and design.
The inherit option means it will receive the body's font family. To change to a different font family, you can do that from font manager.
This 'issue' is caused by the fact that you haven't declared a doctype, causing the browser to run in Quircks mode.
One result of this is what you see happening here: The table element is getting a color: -webkit-text; style which overrides the inheritance from the parent div.
Adding:
<!DOCTYPE html>
at the top of your document will cause the browser to render the page you'd want it to.
90
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With