Solved

beginner's stuff

Posted on 2003-12-07
8
217 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 2

Author Comment

by:muskad202
Comment Utility
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
(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
Comment Utility
Sorry, forgot the link:
http://www.hut.fi/u/hsivonen/units.html
0
 
LVL 2

Author Comment

by:muskad202
Comment Utility
thanks pal :)
0
 
LVL 31

Expert Comment

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

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Do you want to insert HTML5 video into your site? This is the tutorial how to do so. What are the main advantages of HTML5 video? 1) Have good compression, good image quality, and low decode processor use. 2) It is royalty-free 3) It is easi…
Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

743 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now