How to apply one style to only certain texts?

I have the following CSS code for my hyperlink texts.

.staffFullName a, a:link, a:visited, a:active
{
    color: #000066;
    text-decoration: none;
    font-size: 18px;
}
.staffFullName a:hover 
{
    color: Blue;
    text-decoration: underline;
}

Code (markup):

In my code behind, I have this:

<a class="staffFullName" href="staffProfile.aspx?">Staff Profile</a>

And here's the problem. Everything in the page changes font size to 18 and the hover does not work anything. I only want the link to change font size and hover to apply to. Why the whole page now uses the CSS style that I strictly specify in the class of the hyperlink? Any suggestion on how to resolve this issue is much appreciated.

 

If you look at your first line, you're setting that stuff for a:link, a:visited and a:active globally - I suspect you want it to look like:

.staffFullName a, .staffFullName a:link, .staffFullName a:visited, .staffFullName a:active {

PHP:

In other words the ".staffFullName" in the first selector doesn't apply to the the other items after the first comma - you need to be specific. Hope that helps.

 

Almost there. The class applies to the anchor itself, while the css selectors apply to

.staffFullName a, /* any anchor descended from .staffFullName, of which there are none */ 
a:link,   /* this applies to all links except those that are visited /
a:visited,   /* and this get the visited links */ 
a:active   /* this gets all active enter keydowns when the link has focus, and mousedowns */
{
    color: #000066;
    text-decoration: none;
    font-size: 18px;
}
.staffFullName a:hover  /* this get hovered links that are descended from .staff..., in other words, never */ 
{
    color: Blue;
    text-decoration: underline;
}

Code (markup):

Try this instead:

a.staffFullName {
    color: #006;
    font-size: 18px;
    text-decoration: none;
    }

a.staffFullName:hover {
  color: blue;
  text-decoration: underline;
  }

Code (markup):

cheers,

gary

 

Thanks! It works.