Ronx or anyone, css question please

  • Thread starter Thread starter Guest
  • Start date Start date
G

Guest

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
 
What is the default size used by the browser? If it is 10pt then 80% is 7.5pt.
 
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
 
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.
 
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
 
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>
 
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.
 
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
 
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
 
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.
 
Back
Top