Why font-Size is influenced by previous font-size in CSS

**ksz** · 03-29-2012, 04:56 PM

**traq** · 03-29-2012, 08:05 PM

that's exactly how ems (and percentages) are supposed to work.

It's very useful. And if you understand how they work, and pay attention to how and where you apply font-sizes, they make very nice, flexible, user-friendly layouts.

But if you wish, you can avoid the "cascading" behavior in several ways:

at the beginning of your css file, define all block-level elements to have a font-size of 100%.
This will make every container have, by default, the same font-size as its parent.
You can then declare special font sizes when and where needed, and it will be simpler to keep track of them. for example:

Code:

div{ font-size: 1.5em; }
/* bad. font-size will "run away" when divs are inside other divs. */

div div{ font-size: 1em; }
/* better.  stops the "runaway" font-size. */

/* best: get rid of the first two rules and use something like this instead: */
div{ font-size: 1em; }
div.bigger{ font-size: 1.5em; }
/* exactly what you want; no unintended consequences. */

use rems for font sizes. This is a new selector, so browser support isn't complete yet - use px as a fallback when you use rems. A rem is exactly like an em, except that it compares the size to the root element (i.e., the <html> font size) instead of the parent element, so it doesn't cascade like an em does.
use px font sizes.
This is the least desirable option, as it makes the font-size difficult to change in some browsers (and too small/ too large by default on certain monitors/mobile devices - in fact, that problem is the very reason em exists).

also,

Please use the forum's bbcode tags and indent your code to make it more readable:

for php code............[php] <?php /* code goes here */ ?> [/php]
for html...............[html] .....[/html]
for js/css/other.......[code] code goes here................[/code]

**ksz** · 03-29-2012, 11:17 PM

I understand your response, but I don't know how to do what you are suggesting. I am a beginner with CSS.
I am using the CSS in the HTML file, so there is no separate CSS file.
I tried to put

Code:

<style>
body {font-size: 100%}
</style>

The above is not working.
How do I define all block-level elements to have a font-size of 100%

**traq** · 03-30-2012, 03:31 AM

it is working, and it's working correctly. I do understand, however, that it's not doing what you expect.

Also, the way I described "setting everything to 100%" may have been a little misleading; and maybe not quite what you were asking about.

one of the benefits of ems is that they inherit.
say you have all your main content, and a smaller "note" section off to one side:

HTML Code:

<div id="main_content">
    <h1>My content!</h1>
    <p>I'm writing lots of stuff here. 
          Leave me alone so I can finish my website. 
          Blah blah blah...</p>
</div>
<div id="notes">
    <h1>Notes:</h1>
    <p>What I really meant by "blah blah blah" was, 
          <i>you're a wonderful person and I value your opinions</i>.</p>
</div>

You want the "notes" to have a smaller font-size than the main content. Two approaches:

Code:

h1{ font-size: 24px; }
p{ font-size: 16px; }
/* special rules for your "notes" */
/* calculate 3/4 size for all elements */
#notes h1{ font-size: 18px; }
#notes p{ font-size: 12px; }

Obviously, the more content in #main_content or #notes, the larger and more complicated and error-prone our css will become, because we have to define each rule individually.
This is the problem that ems are intended to solve:

Code:

h1{ font-size: 1.5em; }
p{ font-size: 1em; }

#notes{ font-size: .75em; }

all done. fewer lines of code, same result*, all applied to #notes automatically.

*most desktop browsers default to "medium" font-size - usually 16px.

If you notice, the reason this works is because I'm applying different sizes to specific containers (only where I actually want the font-size to change, not on generic elements), and I'm not "nesting" anything. In other words, I'm not doing this:

Code:

div{ font-size: 1.5em; }

HTML Code:

<div>this
    <div>text
        <div>keeps
            <div>getting
                <div>BIGGER!!!!</div>
            </div>
        </div>
    </div>
</div>

You're trying to use "em" as a specific, always-the-same font size. It's not. It's more like percentages. It's based on the font-size of the parent: the parent element font-size is "1em" for the child element's font-size.

To do what you're trying to do, you would have to use px values (and/or rems). In general, however, this should be avoided for the reasons I described above and in my previous post.

About the only time I use pixel font-sizes is when I absolutely need something to always be the same size - for example, text that is related to an image, or a nav menu that is limited to a certain size in order to display correctly.

**jscheuer1** · 03-30-2012, 04:12 AM

You shouldn't use an id selector (#notes) if there's going to be more than one element styled by it on the page as is implied. Use a class (like .notes) instead.

To have all block level elements have 100% font-size, well let's see I may have left some out or included some that don't belong, but it would go something like so:

Code:

body, div, p, h1, h2, h3, h4, blockquote, td, ul, ol, li {
	font-size: 16px !important;
}

By way of explanation, 16px is the closest fixed equivalent of 100%. You should use it (no chance of ambiguity or influence from other containing elements) and the !important keyword as shown if your aim is to have all those elements at full size and only full size (none larger, none smaller).

Personally though I think that would make for a boring page.

And traq has the right idea. If you're going to use percents and want various size fonts on the page, you just have to work with the nature of style.

CSS - stands for Cascading Style Sheets. And that's just what they do, cascade. Like water over a waterfall. It's still the same water when it gets to the bottom, but if anything is done to it on the way down, it will look different. Like if there's a rock sticking out or something it'll flow around it.

In CSS, unless the !important keyword and fixed units are used, things cascade, flow and influence each other. If you're cognizant of how this happens, you can use it to your advantage to create an interesting and/or logical styling to your page that emphasizes it's feeling, meaning, and/or organization.

**ksz** · 03-30-2012, 05:37 PM

I have to say that I didn't expect this level of details and I'm very happy. traq and jscheuer1 are amazing. Now I have a clearer understanding of CSS and especially how font size works. I assume the same concept of inheritance applies to other properties.
Again thank you very much

**traq** · 03-30-2012, 08:16 PM

Originally Posted by ksz

I have to say that I didn't expect this level of details and I'm very happy. traq and jscheuer1 are amazing. Now I have a clearer understanding of CSS and especially how font size works. I assume the same concept of inheritance applies to other properties.
Again thank you very much

Inheritance is related to the unit of measure that you're using (em), not to the font-size property itself. As you've seen above, for example, px values in the font-size never inherit/ cascade.

ems as a font-size are further unique, in that they relate to the element parent's font size - anywhere else you use ems, they relate to the font-size of the element itself. I know it seems odd, but it has to be that way in order to work as intended.

If your question has been answered, please mark your thread "resolved":

On your original post (post #1), click [edit], then click [go advanced].
In the "thread prefix" box, select "Resolved".
Click [save changes].

**jscheuer1** · 03-31-2012, 04:31 AM

Originally Posted by ksz

I have to say that I didn't expect this level of details and I'm very happy. traq and jscheuer1 are amazing. Now I have a clearer understanding of CSS and especially how font size works. I assume the same concept of inheritance applies to other properties.
Again thank you very much

Inheritance is when a property defined for a parent element is inherited by a child. This often is the default for a child element's property when nothing is defined specifically for it for that property. But some properties are not automatically inherited. You need to read the rules as defined for the given property to know for sure. And there are sometimes differences between browsers.

If a property is inherited, and it's something that can be tweaked in a relative manner via percent or em units like width or font-size, then the child element can have a style that uses the inherited property as a jumping off point. But this varies by property. For example, I just mentioned width and font-size. Font-size will be pretty much a direct correlation. If the parent had a fixed or a relative unit, the child may have a relative unit that further modifies the inherited font-size to produce the font-size for the child.

Width will behave similarly, but since with width you also have the possibility of constraints from the rest of the layout or the window itself, these could also come into play.

And, even with inheritance - If the child's property is in fixed units, like px - that will cancel any inheritance. So if the font for the parent is sized at 50%, and the child at 15px, the parent will be 50% of the computed font-size for its parent, while the child will be 15px period.

The same with width, only (as previously mentioned) the constraints of the layout and/or window may interfere.

These are just two properties I picked. One (font-size) because it's what we've been discussing. The other (width), I just pick off the top of my head. Color or background-color are different again in that they're usually though not always inherited.When they are inherited though, they cannot be tweaked relativistically. They can be changed though, like - say from black to red.

Other properties will have their own behavior as to whether or not they're inherited and as to whether or not there are other factors potentially involved.

Thread: Why font-Size is influenced by previous font-size in CSS

Thread Tools

Search Thread

Why font-Size is influenced by previous font-size in CSS

Bookmarks

Bookmarks

Posting Permissions