CODEWITHSUNDEEP
cssfont-size
robodisco
robodisco

Reputation: 4272

using percentages for css text - how do i stop inheritance of font-size from parent

i have something like this

 <body>
    <h2>
    Blue 
    <span>
    <a ....>add to combo</a>
    </span>
    </h2>
  </body>

and css 

#body {font-size: 100%}
h2{font-size: 200%}
a{font-size: 80%}

Now I've been reading up and realize that the a link won't be 80% of 100% but 80% of 200% (of 100%) because percentages are taken from the parents' sizes.

However I'd like all my font-size declarations in percentages without inheriting, but rather just to calculate from some site-wide base font-size - say 16px?

How do you do that?

Upvotes: 2

Views: 2380

Answers (3)

Robert Cabri
Robert Cabri

Reputation: 3981

What you want is not possible with your give code. You want to inherit font 1 particular size, then every font-size in childNodes will be relative to the parent.

if you want to use certain font sizes and not inherit you should explicitly set them

That said never try to use the important statement. Please checkout how CSS assigns his properties to HTML nodes

http://www.w3.org/TR/CSS2/cascade.html#specificity

Upvotes: 2

David Thomas
David Thomas

Reputation: 253308

I don't think you can override inheritance, since that's part of the cascade of Cascading Style-Sheets.

For your usage you'll either have to explicitly state the font-size (this is likely to get very tedious and error-prone very quickly) for elements using (very) specific selectors, eg:

h2 span a {font-size: 18px; } /* or whatever */

Or reorder your html so that the span is a sibling of the h2, rather than descendant. I agree that it should be possible, though.

Upvotes: 0

Roberto Aloi
Roberto Aloi

Reputation: 30985

Try to use "!important" rule:

http://www.w3.org/TR/CSS2/cascade.html#important-rules

Upvotes: 0

Related Questions