Solved

beginner's stuff

Posted on 2003-12-07
8
222 Views
Last Modified: 2013-12-03
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
Comment
Question by:muskad202
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 2
8 Comments
 
LVL 31

Accepted Solution

by:
seanpowell earned 30 total points
ID: 9891898
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 9891928
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 9891971
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 2

Author Comment

by:muskad202
ID: 9892176
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 9892201
(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
 
LVL 31

Expert Comment

by:seanpowell
ID: 9892202
Sorry, forgot the link:
http://www.hut.fi/u/hsivonen/units.html
0
 
LVL 2

Author Comment

by:muskad202
ID: 9892299
thanks pal :)
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9892366
No worries - glad to help out any way I can.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Debugging Html 8 43
Hit counters in SharePoint 2013 2 61
.CSS HTML Help 3 57
html5 1 45
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question