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>

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 (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>

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