How do I change text colour in this css code?

Question

I have a simple header with some menu items:

<div id="header">
<ul id="menu">
<li class="item">
<a class='loginlinks' href='/signup'>Sign Up</a>
<a class='loginlinks' href='/login'>Log In</a>
</li>
</ul>
</div>

I am trying to change the Sign Up and Log In text colour to white using the code below but it's having no effect...the text keeps inheriting the global text colour of red.

.loginlinks a {
color: white;
}

What am I doing wrong here?

EDIT: I see my error, however even changing css to a.loginlinks did not do the trick.

RESOLVED All correct answers, I selected the reference to firebug as that ultimately helped me identify the problem. Thanks to everyone.

Answer 1

Best practice is to use color code (hex), not the name.

a.loginlinks {
color:#FFFFFF;
}

because assigning color by color name is now deprecated.

working DEMO

note: if you still have the problem then try to debug with firebug, it may be that some other property is inherited

Reference: http://www.w3.org/TR/WCAG10-CSS-TECHS/#style-color-contrast