# Tried everything, link color won't change with CSS



## taddy_porter (Jan 4, 2010)

Been messing with this for two hours and can't get the link color to change. I've tried in several different divs, with IE, Firefox, & Opera and all of them keep the standard link color. I can change other properties (padding, float, etc.) so I know it's picking up the class, but the links won't change. The code is below (last class on the bottom is the one I'm working with):


```
/*
Reset
*/
  html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/*
End Reset
*/

#wrap
{
/*
background-image:    url('../images/texture-1.jpg');
*/
/*
background-color: #808080;
*/
background-color: #ddd;
height: 100%;
border: 0px;
padding: 0em;
-moz-border-radius: 5px;
a:link {color: #000000; padding:4px; text-decoration:none; background-color:#FFFFFF; text-align:center;}
a:visited {color: #000000; padding:4px; text-decoration:none; background-color:#FFFFFF; text-align:center;}
a:hover {color: #000000; padding:4px; text-decoration:none; background-color:#FFFFFF; text-align:center;}
a:active {color: #000000; padding:4px; text-decoration:none; background-color:#FFFFFF; text-align:center;}
}

#container
{
width: 90%;
margin: 10px auto;
/*
background-image:    url('../images/texture-1.jpg');
*/
background-color: #fff;
/*
color: #333;
*/
border: 1px solid gray;
line-height: 130%;
-moz-border-radius: 10px;

}

#header {
padding: .5em;

}
#logo_image {
float: left;
position: relative;
}
#logo_image img {
border: none;
}
#header h1 {
    padding: 0;
    margin: 0;
}
#sidebar {
float: left;
width: 15%;
margin: 0;
padding: 1em;
/*
border-right: 1px solid gray;
*/
height: 100%;
display:block;
}


#header_nav a {
override link {color: #000000; padding:4px; text-decoration:none; background-color:#FFFFFF; text-align:center;}
override visited {color: #000000; padding:4px; text-decoration:none; background-color:#FFFFFF; text-align:center;}
override hover {color: #000000; padding:4px; text-decoration:none; background-color:#FFFFFF; text-align:center;}
override active {color: #000000; padding:4px; text-decoration:none; background-color:#FFFFFF; text-align:center;}


}
#nav_bar {
color: #ffffff; 
ul {
    list-style-type:none;
    margin:0;
    padding:0;
    }
    li {
        display:inline;
    }
margin: 0px;
padding: .5em;
background-color:#0000ff;
border: none;
-moz-border-radius: 5px;
}
#nav_bar a {
link {color: #000000; text-decoration: underline; }
visited {color: #000000; text-decoration: underline; }
hover {color: #ff0000; text-decoration: none; }
active {color: #000000; text-decoration: underline; }

border: none;
}
#notice {
color: red;
font-weight: bold;
margin-left: 30px;
marbin-bottom: 30px;
}
#error {
color: red;
font-weight: bold;
margin-left: 30px;
marbin-bottom: 30px;
}
#content {
border-left: 1px solid gray;
margin-left: 20%;
padding: 1em;
-moz-border-radius: 10px;
}

#leftnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }

#footer
{
clear: both;
margin: 0;
padding: 1em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
border: 1px solid gray;
-moz-border-radius: 5px;
}
#Menu {
display:block;
float:left;
padding:10px;
background-color:#eee;
border:1px dashed #999;
line-height:17px;
width:170px;
margin-bottom: 20px;
}
#home_menu {
list-style: none;
margin: 0px;
padding: 0px;
}

#header_nav {
float: right;
override a:link {color: #000000; padding:4px; text-decoration:none; background-color:#FFFFFF; text-align:center;}
override a:visited {color: #000000; padding:4px; text-decoration:none; background-color:#FFFFFF; text-align:center;}
override a:hover {color: #000000; padding:4px; text-decoration:none; background-color:#FFFFFF; text-align:center;}
override a:active {color: #000000; padding:4px; text-decoration:none; background-color:#FFFFFF; text-align:center;}
position: relative;

border: none;
margin-bottom: 10px;
margin-top: 10%;
}
```


----------



## deepdiver01 (Dec 23, 2004)

Are you talking about the header_nav id?

You don't really need the override as long as the header_nav id is the last one that the anchor is in. It will automatically override any earlier style.

Can we have a look at that section of your html to see how it is laid out?


----------



## Big-K (Nov 22, 2003)

wow, sorry but this CSS is just wrong in so many ways. There are incorrectly closed brackets everywhere, and i'm really not sure where you were told about this override syntax, and you should NEVER have nested brackets in CSS. If you have a start bracket, there should always be an end bracket before the next start bracket.

To demonstrate, this extract from your code:


```
#header_nav a {
override link {color: #000000; padding:4px; text-decoration:none; background-color:#FFFFFF; text-align:center;}
override visited {color: #000000; padding:4px; text-decoration:none; background-color:#FFFFFF; text-align:center;}
override hover {color: #000000; padding:4px; text-decoration:none; background-color:#FFFFFF; text-align:center;}
override active {color: #000000; padding:4px; text-decoration:none; background-color:#FFFFFF; text-align:center;}


}
#nav_bar {
color: #ffffff; 
ul {
    list-style-type:none;
    margin:0;
    padding:0;
    }
    li {
        display:inline;
    }
```
should be something along the lines of


```
#header_nav a:link {color: #000000; padding:4px; text-decoration:none; background-color:#FFFFFF; text-align:center;}
#header_nav a:visited {color: #000000; padding:4px; text-decoration:none; background-color:#FFFFFF; text-align:center;}
#header_nav a:hover {color: #000000; padding:4px; text-decoration:none; background-color:#FFFFFF; text-align:center;}
#header_nav a:active {color: #000000; padding:4px; text-decoration:none; background-color:#FFFFFF; text-align:center;}

#nav_bar {
color: #ffffff; 
}

ul {
    list-style-type:none;
    margin:0;
    padding:0;
}
li {
    display:inline;
}
```
If you want to override a specific state of a link, use :state. For example, a:hover{} would apply a style to all links during their hover state. If you apply a color or anything else to a link normally, like a{color:#fff}, it will apply in all states.

a.foo{
color:#ffffff;
}

this will apply a white color to all links with the foo class, regardless of if you are hovering/etc. Any other states will override this automatically, so if i added

a.foo:hover{
color:#000000;
}

then the foo links would be white in every case EXCEPT when they are hovered over, in which case they would be black.


----------



## taddy_porter (Jan 4, 2010)

Got it, thanks. I kind of tore it apart trying to get it to work, that's where all the nested {'s came in. I've got it now, though.


----------

