Question

I have the following HTML

<div class = "left">
<div id = "links">
<a href = "none" style = "text-decoration: none"><b>About</b></a>
<br>
<a href = "none" style = "text-decoration: none"><b>Principals</b></a>
<br>
<a href = "none" style = "text-decoration: none"><b>Contact</b></a>    
<br>    
</div>
</div>​

and CSS

.left {
       position: fixed;
       top: 0px;
       left: 0px;
       width: 30%;
       height: 100%;
       background-color: #8EE5EE;
       color: #000000;
      }
#links {
        position: relative;
        top: 40%;
        text-align: right;
        font-family: "Verdana", "Arial Black", sans-serif;
        font-size: 25px;
        color: #000000;
       }​

The color of my links should be black, but they are appearing as dark blue. What’s wrong with this code?

JSFiddle here

Thanks!

Answer 1

The problem you’re having is that a elements have a default style which doesn’t inherit the color from the parent element. To force the inheritance of the color property:

a {
    color: #000; /* for browsers that don't support 'inherit' as a color value */
    color: inherit;
}