CODEWITHSUNDEEP
css
Aiden Ryan
Aiden Ryan

Reputation: 845

I Have a CSS text colour problem

Right, so I have specified that default links be a certain colour (color: #696), I wanted this to turn all unspecified links that colour, but the problem is, I have a menubar, and on this menu bar I have items with the class of navbtn, these navbtns have a color of #90F, but even though I have specified that class's color, the body's link color still remains parent,

I want the navbtn to have the text colour of #90F not the #696 that I specified. My CSS:

a:link {
    color: #696;
    font-weight: bold;
}

a:visited {
    color: #0C3;
}

--

.navbtn {
    display: block;
    width: 198px;
    height: 35px;
    float:left;
    border-left: 1px solid #CCC;
    border-right: 1px solid #CCC;
    text-align: center;
    line-height: 35px;
    font-size: 18px;
    background-image: url(../global-images/navbtnbg.png);
    color: #09F;
    text-decoration: none;
    font-weight: bold;
}

Upvotes: 0

Views: 87

Answers (4)

cmplieger
cmplieger

Reputation: 7351

try this:

.navbtn {
    display: block;    
    width: 198px;    
    height: 35px;    
    float:left;    
    border-left: 1px solid #CCC;    
    border-right: 1px solid #CCC;    
    text-align: center;
    line-height: 35px;    
    font-size: 18px;    
    background-image: url(../global-images/navbtnbg.png);        
    text-decoration: none;    
    font-weight: bold;
}
a:link {    
    color: #696;    
    font-weight: bold;}
    a:visited {color: #0C3;}
.navbtn a{
    color: #09F!important;
}

Upvotes: 0

user622367
user622367

Reputation:

The rule for a is more specific than the rule for .navbtn, so it will take precedence over the .navbtn rule. If you create a new style rule such as .navbtn a:link, .navbtn a:hover, and so on, then it should give you the results you desire.

Upvotes: 0

David Thomas
David Thomas

Reputation: 253308

I'd suggest that you should make your selector more specific:

a:link.navbtn {
    /* styles for the .navbtn class */
}

It's probably also worth adding styles for the :visited, :hover, :active and :focus styles as well.

a:visited.navbtn {
    /* styles for visited-.navbtn class links */
}

It's worth noting that your actual html might also have an effect, but I can't comment upon that without seeing it.

Upvotes: 3

ezmilhouse
ezmilhouse

Reputation: 9121

.navbtn {
    display: block;
    width: 198px;
    height: 35px;
    float:left;
    border-left: 1px solid #CCC;
    border-right: 1px solid #CCC;
    text-align: center;
    line-height: 35px;
    font-size: 18px;
    background-image: url(../global-images/navbtnbg.png);
    color: #09F !important;
    text-decoration: none;
    font-weight: bold;
}

add !important ...

Upvotes: 0

Related Questions