CSS + Regular Font

I’m using Newspro for my news along with CSS on my main page. However despite having the entire second row in my news entry ‘small’ in Newspro, the main pages’ CSS overrides that for the link variable in the e-mail. How do I make that email address small, but bold?

Why don’t you just create a CSS style for that email row? so it could be something like:

<span class=“email”><a href="mailto:123@bob.com">Email me</a></span>

If you have a CSS style for small, but also wanna make it bold, you have to make the bold tag outside the CSS tag, like so:

<b><span class=“small”>Test</span></b>

Hope I answered your question.

midhost…one of the reason why they call them “cascading” stylesheets is that each style has a certain amount of “importance” and the closer a style is to the affected text, the more likelihood there is that that style will take precedence. If you definately want to have the style applied to that table row, then you should style the row itself like this:

<tr style=“font-weight:bold; font-size: small (or 10pt);”>

note that Netscape does not support the styling of TR tags though, so if you need cross browser support then you will have to style each individual table cell (TD) using the same method.

Robo…I just noticed that you told him to put a bold tag OUTSIDE the style. Why in the world would you need to do that since you can apply a bold style to a piece of text just like any other style.

Well if someone made a style sheet for some small text, it’s font, size, etc. and can’t be bother making another style for the same thing, but bold, they could do it that way. midhost said the CSS was overriding the regular font tag, so I was pointing out that if you put the bold tag outside the CSS, it’ll “override” the CSS.

true…good call.

Nevermid, I fixed it.
<Edited by igsites on 12-08-2000 at 09:42 PM>

I’m attempting to use CSS on my site, http://www.midhost.com, and have set up .news and .nav for the center and left column links respectivly. However, the center section (.news), seems to be pulling mixed settings. The e-mail links are 8pt, but increase to 10pt when hovered on. But the links to Sitepoint and Newspro are 10pt to start with. I can’t seem to figure it out. Anyone have any ideas?
<Edited by igsites on 12-08-2000 at 10:03 PM>

<style>
<!–
body {font-family: “Verdana”; font-size: “10pt”;}
td {font-family: “Verdana”; font-size: “10pt”;}
tr {font-family: “Verdana”; font-size: “10pt”;}

.news
a:link { font-family: “Verdana”; color: #0a0a52; font-size: “8pt”; font-weight: bold; text-decoration: none;}
a:hover { font-family: “Verdana”; color: #9966ff; font-size: “8pt”; font-weight: bold; text-decoration: underline;}
a:visited { font-family: “Verdana”; color: #0a0a52; font-size: “8pt”; font-weight: bold; text-decoration: none;}
a:visited:hover { font-family: “Verdana”; color: #9966ff; font-size: “8pt”; font-weight: bold; text-decoration: underline;}

.nav
a:link { font-family: “Verdana”; color: #000000; font-size: “10pt”; font-weight: bold; text-decoration: none;}
a:hover { font-family: “Verdana”; color: #9966ff; font-size: “10pt”; font-weight: bold; text-decoration: underline;}
a:visited { font-family: “Verdana”; color: #000000; font-size: “10pt”; font-weight: bold; text-decoration: none;}
a:visited:hover { font-family: “Verdana”; color: #9966ff; font-size: “10pt”; font-weight: bold; text-decoration: underline;}
–>
</style>

Referring to your style sheet. The reason why it is not working is because you have your stylesheet set up incorrectly. You are trying to define a custom class for your rollovers, but you need to put the classname in the actual A selector like so"

a.news:link { font-family: “Verdana”; color: #0a0a52; font-size: “8pt”; font-weight: bold; text-decoration: none;}
a.news:hover { font-family: “Verdana”; color: #9966ff; font-size: “8pt”; font-weight: bold; text-decoration: underline;}
a.news:visited { font-family: “Verdana”; color: #0a0a52; font-size: “8pt”; font-weight: bold; text-decoration: none;}
a.news:visited:hover { font-family: “Verdana”; color: #9966ff; font-size: “8pt”; font-weight: bold; text-decoration: underline;}

That will work for you. Do you see the difference? One thing I noticed when looking at your code is that your A HREF tag is broken on your mailto links.

you have this:

<a href="mailto:midhost@neo.rr.com<font size=“1”>

When it should be this:

<a href="mailto:midhost@neo.rr.com"><font size=“1”>

It is that way on both mailto links that you have your email address.

I fixed the e-mail links, but now the CSS settings still seem to be incorrect. Everything seems to be just defaulting.

ok midhost…

You have to do a few things here.

FIrst off, you need to pick one of your LINK styles and have it be the “normal” one (the one that has no class if you will :D).

Ince you have done that, then you need to set up the styles for any other “pseudo-classes” like the a.news:link.

Once you have set the pseudo classes up, then you need to call them by saying <a href=“yourlink.html” class=“news”>text to be linked</a>.

<edit>
One thing to remember, the default A tag (the one that has no extra “class” assignment) does not need to have the class=“yourstyle” to be used. That is the reason why I would suggest using a class for your nav elements and set the default class to be A instead of A.news. YOu will save yourself work by avoiding typing in endless repetitions of class=“news”. I messed up when I did one of my sites and now everytime I have a link in the main body, I have tp type class=“mainpage” in every one of my links. Pain in the BUTT!
</edit>

The page doesn’t automatically know when it it supposed to use one class or the other.

I tried it on the main body links (your email addy) and it worked perfectly.

ps…you can put the class=“news” anywhere in the HREF tag…it doesn’t have to be at the end.
<Edited by creole on 12-09-2000 at 01:54 PM>

Making progress, but one problem remains. The nav bar and the e-mail look fine, however the link in the main body (ie. Sitepoint and Newspro) are not 10pt and blue. Anymore ideas.

I looked at your code and saw taht you are not assigning a class to either of those two links. That means that they will display as whatever style you have set in the default style for links which is this:

a:link { font-family: “Verdana”; color: #000000; font-size: “10pt”; font-weight: bold; text-decoration: none;}
a:hover { font-family: “Verdana”; color: #9966ff; font-size: “10pt”; font-weight: bold; text-decoration: underline;}
a:visited { font-family: “Verdana”; color: #000000; font-size: “10pt”; font-weight: bold; text-decoration: none;}
a:visited:hover { font-family: “Verdana”; color: #9966ff; font-size: “10pt”; font-weight: bold; text-decoration: underline;}