css help 2

[lunatic23]

hey guys,

i have a small problem with my css sheet & my web page, and i'm hoping someone can help me.

i have a separate css sheet linked to my webpage and there's a small section of text in the middle of my page, and some links at the bottom of the page.

i would like these to be different in their "weight"

the middle text enclosed in <p></p> has the following set in the css:

p {font-size:10pt;
color:#9f9fb0;
font-family: &quot;Georgia&quot;, Times New Roman, Times, serif;
font-weight: bold;
}


and the links, enclosed in <p class=&quot;.menu&quot;> have:

.menu {font-family: &quot;Georgia&quot;, Times New Roman, Times,serif;
font-size: 9pt;
color: #9f9fb0;
}

the problem is that the .menu is picking up the &quot;size&quot; & &quot;weight&quot; from <p>. i can't figure out how to change this.

can anyone help or point me in the right direction?

thanks much
luni

i like anything fast enough to do something stupid in..

 

[ChrisHunt]

The &quot;C&quot; bit in CSS stands for &quot;Cascading&quot;, the idea being that style declarations &quot;cascade&quot; from general definitions down to more specific ones. In your case, your <p> rule tells the browser that all <p>s should be bold, your .menu class will inherit this boldness unless you tell it not to.

Try this:
[tt]
p {font-size:10pt;
color:#9f9fb0;
font-family: Georgia, &quot;Times New Roman&quot;, Times, serif;
font-weight: bold;
}

.menu {font-size: 9pt;
font-weight: normal;
}
[/tt]
Note that I don't repeat the colour and font-family declarations, since they'll be cascaded anyway. I've also put &quot;Times New Roman&quot; in quotes, since you (only) need them when a font name includes spaces.

Incidentally, using points for font sizing can cause accessibility problems for some users/browsers. See

http://www.fixingyourwebsite.com/DiveIntoAccessibility/day_26.html

-- Chris Hunt

http://www.extracon.com

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

 

[philote]

Also (and this may have just been a typo on your part),

<p class=&quot;.menu&quot;>

should be:

<p class=&quot;menu&quot;>

In your style sheet, classes are specified by beginning them with a period, id's are specified by beginning them with a #. This means you could have a class called &quot;menu&quot; and an id called &quot;menu&quot;. Right now you have a class called &quot;.menu&quot; so the corresponding style element would be &quot;..menu&quot; (adding a period to the beginning), but I'm not sure that's even allowed. So, in short, your style sheet is correct, just change your html to &quot;menu&quot;.

Kevin
A+, Network+, MCP

 

[lunatic23]

thanks for the help guys,

worked a treat!!

luni

i like anything fast enough to do something stupid in..