在CSS中设置链接的字体颜色

Question

I've been trying to get my navigation bar links to be one color while the main window has links in another color. I'm using a CSS stylesheet and it works but I think my main rule for a is overriding any other rules i have set as the .leftside navigation bar has the wrong color text. I even tried the !IMPORTANT but still nothing seems to fix it unless I remove the a rule in the CSS sheet. Could someone tell me what I'm doing wrong?

HTML:

 a { text-decoration: none; color: #303030; } .leftside { position: relative; float: left; margin-top: 70px; width: 10%; height: 600px; background-color: #4C4C33; margin-bottom: 10px; color: white; } 

 <div class="leftside"> <a href="gallery.html">Image Gallery</a> </div> 

Answer 1

The text inside .leftside actually has the color white . But inside .leftside , there is an <a> . You have defined separate style definitions for <a> , so the color from .leftside is overridden . Overriding is the main idea behind CSS ( Cascading StyleSheet):

The rule used is chosen by cascading down from the more general rules to the specific rule required. The most specific rule is chosen. ( source )

To fix the problem, you need to assign the color to the <a> inside .leftside , which can be done by using the more specific selector .leftside a :

 a { text-decoration: none; color: #303030; } .leftside { position: relative; float: left; margin-top: 70px; width: 10%; height: 600px; background-color: #4C4C33; margin-bottom: 10px; color: white; } .leftside a { color: white; } 

 <div class="leftside"> <a href="gallery.html">Image Gallery</a> </div> 

Answer 2

from your css and html I don't see you setting a specific color for your links within the .leftside div. Here is an example of how I would set the css for the link (using the ".leftside a" selector):

html

<div class="leftside">
    <!-- navigation link will be red -->
    <a href="gallery.html">Image Gallery</a>
</div>

<!-- non-navigation link will be default color -->
<a href="http://google.com" target="_blank">Visit Google</a>

css

a {
    text-decoration: none;
    color: #303030;
}

.leftside {
    position: relative;
    float: left;
    margin-top: 70px;
    width: 10%;
    height: 600px;
    background-color: #4C4C33;
    margin-bottom: 10px;
    color: white;
}

/* here is the selector for the link within the .leftside */
.leftside a {
    color: red;
}

Additional notes

You can also style links based on state. so to style your .leftside a links you would do the following (inspired by W3Schools )

/* unvisited link */
.leftside a:link {
    color: #FF0000;
}

/* visited link */
.leftside a:visited {
    color: #00FF00;
}

/* mouse over link */
.leftside a:hover {
    color: #FF00FF;
}

/* selected link */
.leftside a:active {
    color: #0000FF;
}