Question: I have a page at [http://www.problemio.com/problems/problem.php](http://www.problemio.com/problems/problem.php?problem_id=49), 
and you see on the bottom-right I have a teal image. It is really a link and in that link I can't seem to get the text color to appear white.

Here is my CSS:

```
.button 
{
  display: block;
  background: #4E9CAF;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
  color: white;
  text-color: white;
  font-weight: bold;
  text-decoration: none;
}

a:button.visited 
{
  display: block;
  background: #4E9CAF;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
  color: white;
  text-color: white;
  font-weight: bold;
  text-decoration: none;
}

```

and here is how I make the link with HTML:

```
<a class="button" id="follow_problem" href="#" title="...">Follow Problem</a>

```

Any idea what is going wrong and why the color of the link isn't white?

Answer: 
That's because `a:link` (line 95) is more specific than `.button` (line 109).

You can fix it by changing the rule to

```
.button,
a:link.button {
    /* rules */
}

```

Tips:

* While using `!important` will work, it is a silly workaround that will eventually get you in trouble, and it is actually a misuse - <http://www.w3.org/TR/CSS2/cascade.html#important-rules>
* Use `Firebug` for Firefox, or Chrome's `inspect element`, to check the css affecting a given element.
That's because you have another class in common\_elements.css that has higher priority than .button

```
a:link 
{
    color: #3686A7;
    text-decoration: none;
}

```

Try making your .button more prioritized by `!important`