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% (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?