beginner's stuff

hi !!
i had a couple of questions, and was hoping someone could help me :)
-------
(1)
What is the difference between the 3 font-size s below :

<P SIZE=25 STYLE={color:blue;font-size:36pt}>A
<P SIZE=25 STYLE={color:blue;font-size:36px}>A
<P SIZE=25 STYLE={color:blue;font-size:36}>A

How do I convert one value to another (i.e, 36px means how many pt ?? )

If no font-size is specified anywhere on the page (even with the <FONT> tag), what is the default?


(2)
<FONT SIZE=10>HULLO</FONT>
and
<FONT SIZE=20>HULLO</FONT>

both display HULLO in the same font size. Why?? (same problem with DIV and SPAN)


(3) suppose i use something like

<P SIZE=25 STYLE={color:blue}>ABCD<P>EFGH

EFGH gets displayed in black, not blue. from what i was able to infer, the new <P> tag automatically closes the previous <P> tag. the same thing happens with <DIV>. Are there any other tags that automatically close the <P> tag when they are encountered?


Thanks :)
muskad202
LVL 2
muskad202Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

seanpowellCommented:
Okay - first things first. The syntax you use has to be correct:

1. When you have one of these: <p> you need to end it with one of these: </p>
2. When you use an inline style, the syntax is: <p style="color:blue; font-size:36px;"> not what you've used above. The curly braces are only used in a stylesheet.
3. <p size=25 ...> has no meaning.

As far as the sizes go. "Font size" is an html spec with predefined measurements that you cannot change. This is not to be confused with "font-size" which is a CSS notation for specifying a size, that you do change. The following table will give you a rough approximation of how they all convert, but beware that this sizing is slightly different on PC's and Mac's. It's just a guide:

<table border="0" cellpadding="10" cellspacing="0" width="400">
  <tr>
    <td align="center"><b>FONT SIZE</b></td>
    <td align="center"><b>PIXELS</b></td>
    <td align="center"><b>POINTS</b></td>
  </tr>
  <tr>
    <td align="center"><p><font size="1">size 1</font></p></td>
    <td align="center"><p style="font-size:10px;">size 1</p></td>
    <td align="center"><p style="font-size:7pt;">size 1</p></td>
  </tr>
  <tr>
    <td align="center"><p><font size="2">size 2</font></p></td>
    <td align="center"><p style="font-size:13px;">size 2</p></td>
    <td align="center"><p style="font-size:10pt;">size 2</p></td>
  </tr>
  <tr>
    <td align="center"><p><font size="3">size 3</font></p></td>
    <td align="center"><p style="font-size:16px;">size 3</p></td>
    <td align="center"><p style="font-size:12pt;">size 3</p></td>
  </tr>
  <tr>
    <td align="center"><p><font size="4">size 4</font></p></td>
    <td align="center"><p style="font-size:19px;">size 4</p></td>
    <td align="center"><p style="font-size:14pt;">size 4</p></td>
  </tr>
  <tr>
    <td align="center"><p><font size="5">size 5</font></p></td>
    <td align="center"><p style="font-size:24px;">size 5</p></td>
    <td align="center"><p style="font-size:18pt;">size 5</p></td>
  </tr>
  <tr>
    <td align="center"><p><font size="6">size 6</font></p></td>
    <td align="center"><p style="font-size:32px;">size 6</p></td>
    <td align="center"><p style="font-size:24pt;">size 6</p></td>
  </tr>
  <tr>
    <td align="center"><p><font size="7">size 7</font></p></td>
    <td align="center"><p style="font-size:49px;">size 7</p></td>
    <td align="center"><p style="font-size:36pt;">size 7</p></td>
  </tr>
</table>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
seanpowellCommented:
Forgot to answer your other questions...

<FONT SIZE=10>HULLO</FONT> is the same as <FONT SIZE=20>HULLO</FONT> becuase the "FONT SIZE" html attribute only goes up to 7. So it would also be the same as <FONT SIZE=200>HULLO</FONT> :-)

>>the new <P> tag automatically closes the previous <P> tag
Yes it does - but you should specify the closing P tag.

Here's the correct syntax for your example:

<P STYLE="color:blue;">ABCD</P>
<P>EFGH</P>

So, <P STYLE="color:blue;"> will apply to all the text until the browser sees a </p> or, at the very least, a new <p>
0
seanpowellCommented:
To add:

1. When you use CSS in a stylesheet as below, it will apply to "all" <p> tags.
2. When using the CSS attribute "font-size", 36 is the same as saying 36px. Whenever possible you should specify that.

<html>
<head>
<style type="text/css">
<!--
p         { color:blue; }
p.red     { color:red; }
div       { font-size:13; }
div.large { font-size:36; }
div.normal { font-size:100%; }
//-->
</style>
</head>
<body>
<p>This is blue</p>
<p>And so is this</p>
<p class="red">But this is red</p>
<div>This div has 13px text.</div>
<div class="large">This div has 36px text</div>
<div class="normal">This div has the font size set to the user's browser preference for default text size</div>
</body>
</html>
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

muskad202Author Commented:
hi !!
thanks .. a lot of stuff cleared up ., but a little more

(1)isn't there any easy way to convert pt to px or something? like a formula??
(2)are there any other tags besides <p> and <div> that automatically close a <p> tag??
(3)consider this
<FONT SIZE=7 STYLE="font-size:500">WWW</FONT>
the WWW is displayed enormous .. which means the STYLE attribute takes preference. Is this always true (i.e. for all tags)

thanks for your help :)
muskad202
0
seanpowellCommented:
(1)isn't there any easy way to convert pt to px or something? like a formula??

Not really, because it depends on the resolution of the device. The most basic formula is:
pixel = (point * DPI) / 72
The missing element is DPI. On my monitor it's close to 100, on someone else's it could be closer to 80. So there's no perfect way to do this. THe table listed above gives you a good approximation.

Here's an article that talks a little about this problem.

(2)are there any other tags besides <p> and <div> that automatically close a <p> tag??
You need to close a <p> tag with a </p> tag. Doing otherwise can create a lot of problems for you across different browsers.

(3)<FONT SIZE=7 STYLE="font-size:500">WWW</FONT>

Yes, the style attribute will always take precedence..
0
seanpowellCommented:
Sorry, forgot the link:
http://www.hut.fi/u/hsivonen/units.html
0
muskad202Author Commented:
thanks pal :)
0
seanpowellCommented:
No worries - glad to help out any way I can.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Fonts Typography

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.