CODEWITHSUNDEEP
css
zee
zee

Reputation: 661

How do I change text colour in this css code?

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.

Upvotes: 4

Views: 302

Answers (6)

xkeshav
xkeshav

Reputation: 54016

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

Upvotes: 4

jackJoe
jackJoe

Reputation: 11148

that's because there are no .loginlinks a at your DOM.

In other words, check it again and you'll see that the class .loginlinks is attached to the a.

So, in order to meke it work, just use this CSS:

a.loginlinks {
   color: white;
}

EDIT: after reading the OP edit, the solution depends on how the "global" a are behing defined.

If the OP is "desperate" he/she can use the !important property, whch will override all other definitions.

Like this:

a.loginlinks {
    color: white !important;
}

Upvotes: 1

Jitendra Vyas
Jitendra Vyas

Reputation: 152617

If I'm assuming your condition correctly then it will be solve like this

body {background:red;color:red}
#header a {color:yellow}
#header a.loginlinks {color: white }

See example here http://jsfiddle.net/pyNEe/

Upvotes: 0

Topera
Topera

Reputation: 12389

Change CSS to

a.loginlinks {
color: white;
}

Upvotes: 0

lonesomeday
lonesomeday

Reputation: 237817

That says "a tags within elements of the loginlinks class". You want "a tags that have the loginlinks class":

a.loginlinks {
    color: white;
}

Upvotes: 4

dmitry7
dmitry7

Reputation: 451

try this :)

a.loginlinks {
    color: white;
}

Upvotes: 1

Related Questions