Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 225
  • Last Modified:

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
0
muskad202
Asked:
muskad202
  • 6
  • 2
1 Solution
 
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
 
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 6
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now