Forum Moderators: not2easy
I am working on this page and I have a question about font-size. I set the an div with the id="middle" to have a 90% font size for paragraphs. Now I need a paragraph with a smaller text size. I thought I'd just make a small class and add it to the special paragraphs. That doesn't seem to work. Is the div's p style overriding the class? Any ideas on how to change that? I don't specify a font size for #middle{}or for #content{}. Thank you in advance.
#middle p {
font-size:90%;
color:#000000;
}
.smalltext p{
font-size:x-small;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
<div id="content">
<div id="leftside">content</div>
<div id="middle">
<p>Normal font size</p>
<p class="smalltext">Small font size</p>
</div>
<div id="rightside">content</div>
<hr>
</div>
<div id="Footer">content</div>
</body>
</html>
Just take out the "p"
.bold {font-weight:bold}
that will apply to any paragraph or span in a div. Why will the font-size not behave the same way? Before, I didn't have the p, just .smalltext{font-size:x-small} just the way bold is. What's the rule there?
Basically it's a priority depending on how elaborate the selector is written
#middle p { ...}
will always win out over
p.smalltext {...}
for a <p> that's inside something with the id "middle".
There are some excellent posts in here about that subject e.g.: [webmasterworld.com...]
