Jump to content

Font Size In Percentage And Ems


owosso
 Share

Recommended Posts

Can you check my code. I thought I understood this but obviously, I do not. My text does not size and resize as I would expect. Thanks.Am I correct in understanding the text code I set up in body applies to everything unless otherwise designated? If so, it didn't seem to be working. Instead needed to designate size and style under "p." If I designate for "p," does that carry through to a, h1 and h2? When I designate a size or percentage to any of these, is that amount set as it is? Or is it in addition to what's been set above in p (or the body, where I'd like it to be).I need a simple-language explanation of code sizing with percentage and ems. Or, if anyone has a font setting snippet they consistently use and wish to share, I'd be greatly appreciative:-)Here is my css.

body {	margin: 0; 	padding: 10px 0;	background-color: #CCC;	text-align: center; 	font-family:Verdana, Geneva, sans-serif;		}html,body { width: 100%; height: 100%; }/* 100% in any resolution */*	{margin: 0; padding: 0; }/* creates no space after return*/	#containerHor {	width: 642px;  	margin: 0 auto; 	background:url(images/logoswoosh.gif) no-repeat;	background-color:#FFF;	text-align: left; /* this overrides the text-align: center on the body element. */	padding: 10px 20px 0 18px;}p	{	font-size: 1.0em  62.5% /* 16px × 62.5% = 10px */;	color: #333;	line-height: 1.5em;	font-family: Verdana, Geneva, sans-serif;	}	a	{	text-decoration:none;	}	h1	{	font-size: 1.2em;	color:#395172;	text-align:center;	}	h2	{	font-size: 1.0em;	color:#395172;	text-align:left;	}	

Link to comment
Share on other sites

I think you're first mistake is using %'s and em's for the <p>'s size. Better off to just use em's if you want flexible text. <p> styles will only apply to text within <p> tags, not <a>, <h1> etc. Different tags, different styles (and defaults) apply.

Link to comment
Share on other sites

Check your error console. You'll see that this syntax is incorrect:font-size: 1.0em 62.5%You can have 1.0em or 62.5%, but not both.Font sizes can be inherited from their container elements. You would not normally have a <p> inside an <h1>. But you could have a <p> inside a <div., and using ems or percents on both elements could lead to surprising results.

Link to comment
Share on other sites

Check your error console. You'll see that this syntax is incorrect:font-size: 1.0em 62.5%You can have 1.0em or 62.5%, but not both.Font sizes can be inherited from their container elements. You would not normally have a <p> inside an <h1>. But you could have a <p> inside a <div., and using ems or percents on both elements could lead to surprising results.
Ah, so if I put the 62.5% up in the body and the 1.0 ems in P, would that equal 10px for the font?
Link to comment
Share on other sites

If you define the body that way, 1em in other font declarations will deliver the same result. It's like defining nothing. OTOH, 1em is a useful declaration for things like paragraph bottom-margin.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...