What will be the text size “Universe” with the below declaration
<div style=”font-size:12px;”>World is<div style=”font-size:0.5em;”>VERY small in <div style=”font-size:100%;”>Universe</div></div></div>
I encountered this question in a quiz. Option 4, tempt me to post this question here.
A must read in this context
Although Percentages and Ems are arguably the best method for font sizing, there are two main problems to overcome:
Consistency across browsers
Browsers interpret relative font sizing in different ways, especially in relation to inheritance. One example would be setting font size in the body tag:
body { font-size: 80%; }
Most browsers will render this as being 80% of the element's default font behaviour. A standard H1 will render at 200% default font size, so with the rule above applied to the page, an H1 would become 160% (200% x 80%= 160%) of default font size.
Mac/Opera6 will not apply this rule consistently across content. Text within tables stays at default size. Mac/Netscape4 and Win/Netscape4 will apply this rule to headings as well as text within paragraph tags - making all content on the page 80% size. Inheritance and its effect on nested items
Relative font sizing also runs into problems with inheritance and its effect on nested items. For example, a rule like the one below can cause inheritance problems:
p, ul { font-size: 85%; }
A sample showing paragraph and unordered nested list problem.
Any content within a paragraph or unordered list will be scaled to 80% of the user's default browser size. The problem occurs when there is a nested unordered list. The nested list item will inherit the relative font sizing and apply it again, making the nested list items 72.25% in size (85% x 85% = 72.25%).
This is easily fixed with another rule that will bring all nested list items back to 85% font size:
ul ul { font-size: 100%; }
More here