Set font colors in CSS for links

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>

possible duplicate of [when will "a" tag not inherit color attribute of parent tag?](http://stackoverflow.com/questions/1144931/when-will-a-tag-not-inherit-color-attribute-of-parent-tag) — Stickers, May 03 '15 at 19:16

score 2 · Accepted Answer · edited May 23 '17 at 12:06

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 (CascadingStyleSheet):

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>

Thank you, I've been studying this and I think I understand it now :) — Alex Wisniewski, May 04 '15 at 00:00

David · Answer 2 · 2015-05-03T18:32:05.570

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;
}

Set font colors in CSS for links

2 Answers2