I have run into a bit of a conundrum with my code and cannot seem to find the right solution. Here is what I currently have:
<div id="bloquetexto4" class="bloquetexto">
<H2><b>TITULO</b></H2>
<p>Texto bla bla bla.</p>
Also, here is the CSS associated with it:
.bloquetexto p {
font-size: 110%;
color: orange;
}
.bloquetexto h2 { font-size: 90%; }
My issue lies in trying to adjust the size of the H2 element without affecting other text on the page. Currently, setting the font size to 90% results in a much smaller text size than intended (you can see this in action on JsFiddle http://jsfiddle.net/c6hzghcq/). It appears that the size is being calculated based on the parent element's font size rather than its own.
Is there a way to make the H2 size calculation based solely on itself, independent of other elements on the page? I simply want the H2 to be slightly smaller than usual, regardless of any surrounding text sizes.