CODEWITHSUNDEEP
htmlcssstyles
Big Boy
Big Boy

Reputation: 13

Div specific styles cancel out styles

In my CSS file I have some general styles for links that I want to keep universal, such as no text decoration when visited, and a color change when hovered, but I want some specific styles on my navigation bar at the top like the font being white all the time (Black nav bar but white everything else so I want to see the links), but the #navBar specific styles on my links seem to make any other general styles on links cancel out, such as the color change to #1d99ff in a:hover, or the text-decoration: none in both a:link and a:visited as shown below.

a:link{
text-decoration: none;
}
a:visited{
    text-decoration: none;
    color: #000000;
}
a:hover{
    color: #1e99ff
}

#navBar{
    text-align: center;
    word-spacing: 100px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: bold;
    position: absolute;
    left: 0;
    right: 0;
    height: 20px;
    background-color: #000000;
    letter-spacing: 3px;
}   
#navBar a:link{
    color: #FFFFFF;
}
#navBar a:visited{
    color: #FFFFFF;
}

Shouldn't the general link styles be applied to all links, and the ID specific ones take those styles and add the ones specified? Or do I have to redefine the styles already defined before?

Thanks

Upvotes: 0

Views: 160

Answers (1)

Slava Knyazev
Slava Knyazev

Reputation: 6081

When you want to override a single item's style for instance, you should do it via html since it will simply override all conflicts.

<div style="color: #000;">

Upvotes: 0

Related Questions