Font-size problem related to 'universal selector' in .css file

As the thread's title says I am interested (more or less "theoretically", i.e. I just want to know why is it so) why I have problems with font-sizes in cases of a few "span" classes (and in a few other cases too) after adding a "universal selector" to the stylesheet file that I am using on that particular website that's having the mentioned issues with font-size. From the three separate problems that I've found so far (see the thread below linked under the last "P.S. -" paragraph), I will mention only the most annoying/obvious one (i.e. the "span" class one); you see, it's that the font-size setting from most of the "span" classes now (with the "universal selector" in style-file) revert back to some obviously default bigger font-size.


For example please head on to the intro.html page on my computing-related website, and check out the "sponsored links" text at the top (the "span" class is "box"), and/or further scroll to bottom and find the "This thing on the left is a simple Altavista's BabelFish translation script ..." text (the "span" class is also "box"), and you'll notice that the font-size is 12px instead of 10px as it should be (note that I specified it in pixels not in percents so that it shouldn't "add up"), and as it's specified in the respective root.css stylesheet file.


While for the comparison take a look at the text "Copyright © Ivan Tadej Kandus. Some Rights Reserved." and "Disclaimer 1:" (the "span" class is also "box", same as above), which both normally have a smaller font-size as they should.


The universal selector's code:

* {
    font-family: tahoma, verdana, sans-serif;
    font-size: 12px;
}

Code (markup):

The code of that span class:

span.box {
    background-color: #ffffcc;
    color: #000000;
    font-family: tahoma, verdana, sans-serif;
    font-size: 10px;
}

Code (markup):

The code of the first span:

<span class="box"><em>sponsored links</em></span>

Code (markup):

The code of the second span:

<span class="box"><em>This thing on the left is a simple Altavista's <strong>BabelFish</strong> translation script ...</em></span>

Code (markup):

Oh and well, the second also quite annoying problem is that now (after adding the "universal selector") any bolded links text's font-size (i.e. the links inside <strong> tags) is also 12px and not 10px as I set it for the "a" element. Though this is not true for the emphasized text, i.e. the text inside <em> element.


P.S. - Originally it was the The order of selectors in a stylesheet file thread, in which Dan Schulz recommended to me to use the "universal selector" in the first place, while also afterwards I created another one titled Wrong font-size after adding a "universal selector" to my CSS file where I asked about these problems with font-size (as as result of adding a "universal selector" to my .css file), but I didn't get many useful replies there.


thanks for any explanation, tayiper

 

I only use the universal selector to strip the margins and padding from a Web page. Font declarations go in the body for sans-serif fonts and headings (H1, H2, H3, H4, H5, H6) for serif fonts.

Pull the font declarations from the universal selector and put them in the body selector instead.

 

I was about to say, assigning font sizes via the US does NOT sound like something Dan would even suggest.

Font sizes and the universal selector does NOT work reliably cross browser - the only thing I would EVER do using the universal selector is:

* {
margin:0;
padding:0;
}

You want to style anything else, STYLE IT DIRECTLY... as Dan said you're font size should go in body for your default size, then adjust each of your headers individually.

 

Thank you both for the replies. You know that I just realized what kk5st meant with his reply in that other thread (see my first post above) when he mentioned "font-size being inherited, and that one shouldn't use the * selector for inherited properties". I will fix my .css files right away!!


tayiper

 

I already updated that stylesheet file so if you want to see the "old version" click here: root-old.css ...


Cheers all, tayiper

 

It could have been worse, you could have done that with a %/em font size.

* { font-size:80% }

can have real fun results.

html: 80%
body: 80% of 80% = 64%
P : 80% of 64% = 51.2%
STRONG inside the P : 80% of 51.2% = 40.96%

You can see how that could be 'bad' - assuming it even ends up applied right in the first place.

 

Oh and one more question: is there any sense in putting at least the font-family stuff (i.e. "font-family: tahoma, verdana, sans-serif;" in my case) into/under the universal selector?? And further, if I do this, then I suppose I don't need to specify it elsewhere (please check out again that .css file linked above to see exactly what I mean) anymore??!


tayiper

 

Putting it in BODY will have the same effect, I'm not 100% sure how well applying it via the universal will work.

I do know that applying it to body does skip some elements that the universal wouldn't miss... textarea's and inputs for example... I'm just not sure you WANT to override those, or if you do that you'd want them the same as your body text.

I probably wouldn't bother, but then since my mantra is ALWAYS state weight, size, line-height and font-family - I just apply it as needed where needed as a single line.