Paragraph / font size; proper technique

[Girard Ibanez]

What is the proper / preferred method to change the font / paragraph looks.

In this example, I would like to change the default paragraph

<p> this text </p>


example1 = <p><span class="gray"> this text </span></p>

example2 = <p class="gray"> this text </p>



CSS style
.gray { font-size:1em; color: gray}

p.gray{ font-size:1em; color: gray}


thanks,

G

[djr33]

A span is for a segment within a paragraph.
For the whole paragraph, use <p>.

[jscheuer1]

Both examples are correct. The second is more economical. However, it could need to be like in the first example if only some of the text in the paragraph needed that style. 1em is meaningless here. It would be the same as no font size specified. Font sizes really should be done as percents. This is not so much a matter of correctness as a matter of what works in the most browsers. 1em is 100&#37; (also the same as not specifying).

If you have this:


.gray { font-size:1em; color: gray}

You don't need this:


p.gray{ font-size:1em; color: gray}

It really depends upon what you want. p.gray applies only to paragraphs. .gray can apply to any element.

[codeexploiter]

If you are looking for a method in which you have all the paragraph elements have a similar style without using a class upon them (it has its own disadvantages in all the other cases other than this) you can go for the following method


p { font-size:1em; color: gray}

This will apply the above mentioned style to all the paragraph elements you have in the page.

In the cases John explained you have more control over the style , you can decide on which paragraph you want to apply the style.

[Girard Ibanez]

Thanks for the clarification. I now understand the method and its purpose.




Girard

[Twey]

"Gray," however, is a poor choice for a class name. Class names should be semantic, not visual.

[Girard Ibanez]

"Gray," however, is a poor choice for a class name. Class names should be semantic, not visual.

So if I wanted to change the <p> text size and color of the fonts what would be the best semantic way of organizing the style sheet? The more font size and colors can be very cluttered.

For example: If I had several pages and wanted different font sizes of a gray font, a red font ...etc.


Question 2:

If my divs are using ems as the width, and I my <p> tag is define for a font-size of 0.85em, what would be the best way to visually know what the size of the text would look like if I use a class tag with a font size of 0.75em?

From what I understand, defining the width using an em value will change the font size depending on the relationship of the child box (div). Still confuse on this one. I just like the way declaring em for the width zooms in portionally as the window shrinks or grows.


<div id="box">
<p> This text </p>
<p><span class="gray"> This text </span></p>

<div id="box2>
<p>This text </p>
<p><span class="gray"> This text </span></p>
</div>
</div>



<style>

#box1 {width: 50em}
#box2 {width: 50em}

p {font-size: 0.85em}
p.gray {font-size: 0.75em, color: gray;}

</style>

[nwalton]

what would be the best semantic way of organizing the style sheet?

The principle here is that the classes should be defined by their purpose, not by how they look. For instance, if the smaller gray text were meant as a caption, you would call it ".caption". Or if it were meant as a sub-head, you could even use an h3 or h4 instead of the span (that is, if everything in the block is meant to be small and gray, rather than just a portion of a paragraph).


<div id="box">
<p> This text </p>
<h3> This text </h3>
...
</div>

...
h3 { color:gray; font-size:0.75em;}



If my divs are using ems as the width, and I my <p> tag is define for a font-size of 0.85em, what would be the best way to visually know what the size of the text would look like if I use a class tag with a font size of 0.75em?

An em is simply a measurement relative to the size of the font.

The default em size is usually 12px. If the <p> is defined as .85em, the font size ends up a little more than 10px. If you define another class tag, within that paragraph, at .75 em, it is measured relative to the size of the paragraph's font size (10px) not the default size (12px). It would end up being between 7px and 8px high (.75 of 10px).


From what I understand, defining the width using an em value will change the font size depending on the relationship of the child box (div)

Defining the width of the <div> with an em value does not change the font size. It changes the width of the <div>, relative to the size of the font. So if I have a <div> that is 50em, the line lengths will be the same whether the font is 10em or .5em.


I hope that helps. I know it can get quite confusing sometimes.

[Twey]

The default em size is usually 12px. If the <p> is defined as .85em, the font size ends up a little more than 10px. If you define another class tag, within that paragraph, at .75 em, it is measured relative to the size of the paragraph's font size (10px) not the default size (12px). It would end up being between 7px and 8px high (.75 of 10px). Well, in theory. Unfortunately, IE has a bug here and fails to calculate that, so we have to use percentages for font size instead.

[nwalton]

What doesn't break in IE....

So does IE not calculate ems at all, or is it just non-standard?

[jscheuer1]

IE handles ems fairly well but, there are cases (with font size) where they are not handled well. As a result, it is best to simply use % font sizes. They are equivalent. 100% is 1em - 85% is .85em, etc.

[Twey]

It has no problem with the first level:
<div style="font-size: 0.5em;">
<p>This text is half the default size.</p>
<p style="font-size: 0.5em;">However, this text is not a quarter of the default size, as it should be.</p>
</div>

[Girard Ibanez]

Another question:

#1
Why is it that the width of my div gets smaller when declaring a font-size smaller then the default? But if I declare the <p> font-size the width of the div does not change.

#2
So should I just declare a font size for the <p> tag and then use a <p class> to change the font size or style within the paragaraph?






body: {font-size: 1em; /*default size 16px, 100%, 1em,*/ }

#pagewith: width: 42em;
#leftcol: width:10em;
#maincol: width:32em; font-size: 0.875em;







<body>
<div id="pagewidth">

<div id="leftcol"> </div>

<div id="maincol">
<p> This text </p>
</div>


</div>
</body>

[Girard Ibanez]

I figured out the relation ship of the font when using the em values.

Example:
body font-size = 1em (16px) or (100&#37;)
maincol font size = 0.875em (14px) or (87.5%)

To decrease font size of child element of the maincol (parent) to 10px (0.625em) use the following formula:

child pixels / parent pixels = child ems or target pixel / maincol = child em

10px / 14px = 0.714em or (10px) or (71.4%)

To increase font size:
16px / 14px = 1.43em (16px) or (143%)

Note: 1em = 16px = 100% To convert px to em use the formula: px / 16 = em
or 14px / 16 = 0.875em (87.5%)


Thanks for the IE explanation .... I'll change the em to % as this will make the page cross browser compatible.

I'm still working on the <LI> but I do believe if I declare a font-size of 1em (100%) that it will maintain the same font-size as the parent element.

[Twey]

Why is it that the width of my div gets smaller when declaring a font-size smaller then the default? But if I declare the <p> font-size the width of the div does not change.Is this in all browsers or just IE?
So should I just declare a font size for the <p> tag and then use a <p class> to change the font size or style within the paragaraph?Yes.
Thanks for the IE explanation .... I'll change the em to &#37; as this will make the page cross browser compatible.Note that that's just for font sizes, IE doesn't have a problem with ems for element sizes (and indeed, % doesn't perform the same function for elements).
body font-size = 1em (16px) You are aware that the 16px is only on your system, aren't you? It may vary for others.

[Girard Ibanez]

Quote:
Why is it that the width of my div gets smaller when declaring a font-size smaller then the default? But if I declare the <p> font-size the width of the div does not change.
Is this in all browsers or just IE?



I just noticed this in Fire Fox when I changed the font-size of the div and noticed the div shrunk




body font-size = 1em (16px)
You are aware that the 16px is only on your system, aren't you? It may vary for others.



No I did not Know. But if my default size is 16, and the page looks the way I want it, would it look the same on a system that as a different default size?

Would those other system scale them the same and maintain the same visual as what I see on my system?

[Twey]

No I did not Know. But if my default size is 16, and the page looks the way I want it, would it look the same on a system that as a different default size?

Would those other system scale them the same and maintain the same visual as what I see on my system?If you've only used ems, exs and percentages, yes. If you've mixed in absolute units, or used percentages on elements that are direct children of the body, then no.
I just noticed this in Fire Fox when I changed the font-size of the div and noticed the div shrunkAnd the <p> is inside the <div>? In that case I'm afraid I've no idea.

[Girard Ibanez]

The decrease in div width does not happen if the divs width are in px values. If the divs are in em values and I declare a smaller font size for the div then it will shrink the div width.

I thought that the div width should remain the same and not change in respect to the font size.

This happen in IE 7 as well.

[Twey]

Oh, of the <div>, of course. I thought you were talking about changing the font size on the paragraph.

ems are relative to the font size. I'm sure one of us said that up above somewhere.