Ronx or anyone, css question please

[Susie]

I have added css to all my pages, and have done very well, but havent
published them yet. I had them all set with px font sizes, then got to
reading, and am totally confused, as usual. I found this that Ronx wrote in
another post,

<style type="text/css">
body,td,th,p {font-size:80%;font-family:trebuchet, arial, helvetica,
sans-serif;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-family:trebuchet, arial, helvetica,
sans-serif;}
</style>

and most of the page will be styled at approx 10pt text using Trebuchet.
________________________________________________

I am not using Trebuchet, I am using Verdana or Arial, and when I use 80%
and copy and paste my text into word, it says I have a 7.5 size. Thats just
too small. I understand why using percent is good, but I hate it. I have
no clue how to use the font size keywords, does anyone know of a site that
explains this in very simple terms? Why is my font 7.5?
Thanks for any help,
Susie

 

[MD Websunlimited]

What is the default size used by the browser? If it is 10pt then 80% is 7.5pt.

 

[Susie]

I have it set at medium. When I tried 100% for Arial, I get 12 pt. So, I
just changed to 90%, then adjusted all the h1, and h2. Also, I have all my
text in <td> and use <p> only when I need it, so, do I need to put "p" in my
<style type="text/css">, if I do, then the font is diffeeent than the font
that doesnt have <p> . I hope that made sense. Here is my <style
type="text/css"> code-

<style type="text/css">
body,td {font-size:90%; font-family: arial, helvetica,
sans-serif;}
h1 {font-size:130%; font-family: arial, helvetica,
sans-serif;}
h2 {font: small-caps 900 100% arial, helvetica,
sans-serif;}
</style>

<style type="text/css">
a.link
{
font: small-caps 900 90% arial }
a.banner
{
font: small-caps 900 90% arial }
a.footer
{
font: small-caps 900 90% arial }
</style>

Thanks so much for your help,
Susie

 

[Ronx]

See www.rxs-enterprises.org/tests/ems-percent.htm which (if you look at the
source) shows different ways to size text, including %, ems, and named
sizes.

To include the p tag in the 90%, then change

body,td {font-size:90%; font-family: arial, helvetica,
sans-serif;}

to

body,td,p {font-size:90%; font-family: arial, helvetica,
sans-serif;}

You can add other tags in the same way.

One problem with using %, or ems, is that the resulting sizes are
cumulative:

<td><p>some text</p></td> will, using your style sheet, result in "some
text" displayed at about
12pt x 90% x 90% x 90% = 8pt in some browsers, 9pt in others - perhaps not
what you expect or want.

Bear that in mind if you nest tags in this fashion.

 

[Susie]

Thanks for your reply Ron, YES, if I nest the <td> and <p> my paragraphs are
different sizes, grrrrrr! But what choice do I have, I need to seperate my
paragraphs, if I use <br> it works, no difference in sizes, but not correct
code for that purpose.

If I use font size keywords, don't I have to go in and put <p class="sml">
or medium etcc, in front of everything I have written? Jeez!

What method are you using???
Thanks,
Susie

 

[Ronx]

I use keywords like small, medium etc.

Try the following styles:
If you use a complete !doctype (works for all modern browsers (IE6 and
later, Netscape 6 and later, FireFox))

<style type="text/css">
p,td,li {font-size:small; font-family: arial, helvetica,sans-serif;}
h1 {font-size:large; font-family: arial, helvetica,sans-serif;}
h2 {font: small-caps 900 medium arial, helvetica, sans-serif;}
</style>

Without a !doctype (puts IE6 into quirks mode, and non-IE browsers may
display text a size smaller than you would like.)

<style type="text/css">
p,td,li {font-size:x-small; font-family: arial, helvetica,sans-serif;}
h1 {font-size:medium; font-family: arial, helvetica,sans-serif;}
h2 {font: small-caps 900 small arial, helvetica, sans-serif;}
</style>

 

[Murray]

With a valid and complete doctype, inheritance is much better. In that
case, you'd only need to do this -

body { font-family:arial, helvetica, sans-serif; }
p,td,li { font-size:large; }
h1 { font-size:large; }
h2 {font:small-caps 900 medium; }

since the font-family will be inherited into those other tags.

 

[Susie]

Thank you Ron! I had actually done all my pages in % and looked god, but
much better this way Question if I may, is it important that I put this
<style type="text/css">
<!--
OR leave out the <!--

I keep seeing it both ways.

Thanks so much,
Susie

 

[Susie]

Thank you for replying Murray, I like your code, its much simpler, but, the
text does not come out as clear and easy to read as the other. Strange...
Thanks
Susie

 

[Murray]

Not just strange - it's impossible. There is no way that the text could
look different, since it has exactly the same styles.

And the <!-- and --> is not required - it's there to hide the CSS from older
browsers and it's totally unnecessary anymore.