I am having trouble changing the font size of some text in this stylesheet.
I tried to add “font-size: 2em;” to some elements but its not taking effect and I don’t know why its not. I just want to change the font size of the text in the tabs and it won’t change.
I just tried this and added 2em instead of 85% and nothing changed. In fact, I’ve had this problem before where changes do not update or font sizes do not change. what else should I be looking for?
So I added font-size: 100% in my body so that I have a standard to start from. But that still doesn’t explain why my changes in the tabs.css is not applied?
I chose 2em so that it would be a drastic change so that I can easily see if changes are applied.
I have 2 style sheets. style.css for the site and tabs.css for the tabs only.
this is the styles.css:
I don’t think there is anything conflicting as I use different names and stuff.
It’s important to set a default font size in your body tag, which makes managing the font size for other elements an easy task. Most browsers have a default font size of 16px. One of the methods used to manage the font size for different elements is to reduce the default font-size for the entire website to 10px which makes managing font sizes for the rest of the site easy. To do so you need to set font size for your body tag to 62.5%: 16 x 62.5% = 10;
body {
font-size: 62.5%;
}
From this point forward you can use em as measurement. I.o.w. 1.2 em is equal to 12px, 1.4em equal to 14px and so on
I just use 100% on body and make my standard 1em from that point on, but I don’t like tiny text. When I make text smaller or bigger, I still try to base it on some round pixel size (even if that’s just a fantasy). So anyway, I often work with 0.75em, 0.875em … 1.25em etc. Of course, once inheritance starts to kick in, you can kiss whole number pixel sizes goodbye. (E.g. 0.875 x 1.25 = no hope )
Hi ralph.m thank you for the tip. Didn’t look at it that way, but maybe I did, because for quite some time now I use the 100.01% rule for the body tag. Usually I set the font-size for the wrapper after that to 0.8 em. What would you suggest to use?
But changing font-size: 85%; to font-size: 2em; would make the text WAY too big.
@donboe That 62.5% technique is generally frowned upon these days. It is too risky, as some people have font sizes set to smaller than the norm, meaning that text can be riidiculously small and thus illegible.