Solved

beginner's stuff

Posted on 2003-12-07
8
219 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
  • 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
Simplifying Server Workload Migrations

This use case outlines the migration challenges that organizations face and how the Acronis AnyData Engine supports physical-to-physical (P2P), physical-to-virtual (P2V), virtual to physical (V2P), and cross-virtual (V2V) migration scenarios to address these challenges.

 
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

Use Case: Protecting a Hybrid Cloud Infrastructure

Microsoft Azure is rapidly becoming the norm in dynamic IT environments. This document describes the challenges that organizations face when protecting data in a hybrid cloud IT environment and presents a use case to demonstrate how Acronis Backup protects all data.

Question has a verified solution.

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

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

777 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