Simple CSS Question

Question

Here's the CSS

.box {
    background-color: #CCCCCC;
}
.box-title {
    font-size: small;
    font-weight: bold;
    color: #000000;
    background-image: url(/icons/bg.png);
    background-repeat: repeat-x;
}
.box-content-container {
    background-color: #FFFFFF;
}

a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
color: #000000;
}
a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
color: #000000;
}
a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: underline;
color: #000000;
}
a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
color: #000000;
} 

a.tag18:link {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
}
a.tag18:hover {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    text-decoration: underline;
}
a.tag18:visited {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
}
a.tag18:active {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
}

And the HTML

<table width="100%"  border="0" align="center" cellpadding="0" cellspacing="1" class="box">
  <tr>
    <th class="box-title-header" scope="col">Categories </th>
  </tr>
  <tr>
    <td class="box-content-container">
        <div align="center">
        <a class="tag18" href="http://www.site.com"&gt;Category 1</a>    
        </div>
        <p>&nbsp;</p>
    </td>
  </tr>
</table>

Q. Why does the font size not appear as 18px high, as defined in the CSS?

EDIT:

I'd like to create one CSS style for most hyperlinks. I believe this is achieved with a:link

For additional styles you can create .style1 ...

Question
Can a:link exist with a:style1? It seems a:link overrides the style.

Answer
a:link overrides any a.pseudo-class. For multiple styles use a:link, then additional hyperlink styles require ' .classname a:link ' This can be achieved in HTML with [ span class = 'classname' ] .

Answer 1

Have you tried

.tag18 {font-size:18px;}

It is best to not repeat CSS directives, let them cascade. Meaning, if .tag18 is going to be a certain family font and size, just set it within .tag18 and do your hovers with text-decoration, color, etc

Answer 2

The :link and :visited pseudo-classes must be defined before you define the :hover and :active

http://www.w3schools.com/CSS/css_pseudo_classes.asp

Just move your style declarations around and you'll be good

Answer 3

Have you tried testing it with Firebug?

http://getfirebug.com/

Once installed, you can inspect the element, and it will show you the CSS selectors that apply to it, including which ones override parent declarations. I've found it helps A LOT.