7 replies [Last post]
Phil
Offline
newbie
Last seen: 16 years 24 weeks ago
Timezone: GMT-8
Joined: 2004-06-07
Posts: 4
Points: 0

I am trying to convert my web page to css from old html. I can't seem to get the css to force a default font size of 18px. It seems I have to use <span style="font-size=18px"> </span> around each block of text.

I have put the following in the head section:

<style type="text/css">
body

{
color: navy;

font-size: 18px;

background-image: url("Images/blueleather.gif");
background-repeat:
repeat;
background-attachment:
fixed
}
a
{
color: blue;
}
a:visited
{
color: maroon;
}
a:active
{
color: red;
}
a:hover { color: purple; background: #AFB
}

</style>

All elements except the font size seem to work. The font size displayed is smaller than 18px. What am I doing wrong?

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 3 years 28 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Set a default font size for an entire web page

A quick and dirty way to specify a font size close to 18px for a page using is to have [code]body {
font:normal normal 150%/1.2 tahoma, verdana, humanist san-serif;
. . .
}

This sets the font weight style size/linespacing and face all in one declaration. The 150% sets the base size of an em. If you wish to specify different font sizes, then they can be specified with ems. As a general rule, I never use px font sizes since they are of a fixed size only in IE. Also, specifying a % in the body and ems elsewhere appears to provide for more consistent and predictable sizing across different browsers.

This is a lot to absorb if you are new to this. My suggestion is for you to start with the code as I specified above and then change the different properties one at a time to see what the effect is. Later on you will learn how to create a stylesheet in the <head> section or how to have an external stylesheet.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Phil
Offline
newbie
Last seen: 16 years 24 weeks ago
Timezone: GMT-8
Joined: 2004-06-07
Posts: 4
Points: 0

Set a default font size for an entire web page

Thank you David,

I have incorporated your suggested changes and played around with the different properties. They seem to work fine EXCEPT inside tables I still need to use the span stuff (Is that an em, as you call it?). Can we use the default style settings even inside tables?

janim
Offline
Regular
phinland
Last seen: 16 years 30 weeks ago
phinland
Joined: 2004-04-26
Posts: 11
Points: 0

Set a default font size for an entire web page

Some older browsers like IE 5.5 PC can't handle the inheritance well. You must add a 'td' rule to your style declaration

body, td { 
font:normal normal 150%/1.2 tahoma...
} 

An 'em' is a unit relative to base font size, so 1em is as high as the base font height and 0.5em a half of it etc. ems can be applied to all kinds of elements in css like any other supported unit.

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 3 years 28 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Set a default font size for an entire web page

You are quite right. - I missed the td :oops:

I love using ems because they allow elements to adapt to your text proportions: For example, look at this heading styling trick:

h1,h2,h3,h4,h5,h6 {
border-color:#f00;
border-width:0 0 .1em 1.25em;
border-style:solid;
padding-left:.5em;
}
This one bit of code creates a graphic element that highlights all your headings and remains proportional depending on heading level and user font size.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Phil
Offline
newbie
Last seen: 16 years 24 weeks ago
Timezone: GMT-8
Joined: 2004-06-07
Posts: 4
Points: 0

Set a default font size for an entire web page

janim wrote:
Some older browsers like IE 5.5 PC can't handle the inheritance well. You must add a 'td' rule to your style declaration
body, td { 
font:normal normal 150%/1.2 tahoma...
} 

An 'em' is a unit relative to base font size, so 1em is as high as the base font height and 0.5em a half of it etc. ems can be applied to all kinds of elements in css like any other supported unit.

Thanks again guys & gals. Adding the "td" completely screws up my page if I add it as below:
<style type="text/css">
body, td {
font:normal normal 100%/1.0 georgia, times new roman, verdana;

etc.

Here's the page I'm working on. Just look at the page source if you please. http://www.philsden.com/05/sunfun0102.html

janim
Offline
Regular
phinland
Last seen: 16 years 30 weeks ago
phinland
Joined: 2004-04-26
Posts: 11
Points: 0

Set a default font size for an entire web page

I guess you're applying all body styles to td aswell? That's most likely to make your page messy. Here's where you could start from:

<style type="text/css">
body { 
color: navy;
background-image: url("Images/blueleather.gif");
background-repeat: repeat;
background-attachment: fixed
}
body, td { 
font:normal normal 100%/1.0 georgia, times new roman, verdana; 
}
a {
color: blue;
}
a:visited {
color: maroon;
}
a:active {
color: red;
}
a:hover {
color: purple; 
background: #AFB; 
}
</style> 

Phil
Offline
newbie
Last seen: 16 years 24 weeks ago
Timezone: GMT-8
Joined: 2004-06-07
Posts: 4
Points: 0

Set a default font size for an entire web page

Janim,

That did it!. Thank you.