After making the header text a link it changed its color to purple, how do I change it back in CSS?

Question

After making my header logo text a link, it changed to this color. I can not for the life of me target it in CSS, how do I change the color of it back to white? Please help, I have tried everything and I have no idea what to do. Thanks.

HTML:

 <header>
       <div class"container">
         <div id"branding">
          <a href="index.html"/>
           <h1><span class="highlight">Acme</span> Web Design</h1>
         </a>
         </div>

CSS:

header .highlight, header .current a {
  color: #e8491d;
  font-weight: bold;
}

header a:link {
  text-decoration: none;
}

header a:visited {
  text-decoration: none;
}

header a:active {
  text-decoration: none;
}

header a:hover {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}

Answer 1

Some simple CSS should fix your issue, try the following:

#branding a { color: white; }

You just need to make sure you're targeting the correct element

Oh, and also fix <div id"branding"> and <div class"container"> to <div id="branding"> and <div class="container">

Answer 2

You do have explicit styles set up, but your a:hover is not where the color is coming from and it doesn't override the rules that govern that color.

Every browser has a built-in default style sheet (the "user-agent stylesheet"). This is where default styling comes from. Your browser automatically colors links based on their state (visited, unvisited, active, focused).

In order to override that, you'll simply need to set up selectors for your links (which you do have) and set the color in those selectors.

a         { text-decoration:none; } /* no underlines on any links */
a:link    { color:blue; }           /* links not in the browser's history */
a:visited { color:purple; }         /* visited links in the browser's history */
a:active  { color:red; }            /* links that are in the process of being clicked */
a:focus   { text-decoration:underline; }  /* links that have been focused */

And, of course, remember that even these styles can be overridden by other's you may have that are more specific, so you may need to adjust these selectors.

Answer 3

Try adding color: #e8491d; to a:visited . This will make sure the color never changes when the link is visited.

Answer 4

Since your CSS the "original" color of the text looks like black, so, in order to back to the color the text had before you add the link, the right thing is:

header a:link {
  text-decoration: none;
  color:initial
}

beware with:

#branding a { color: white; }

cause using that you "overrride" proprieties of pseudoclasses that i see in your CSS, for instance this rollover effect:

header a:hover {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}

So, if you don't want to set each state of the element you'd better remove pseudoclasses and, if needed group everything into:

    #branding a { 
     color: white;
     text-decoration: none;
     font-weight: bold;
     }

Don't forget to clean up your HTML, this one is correct:

<header>
       <div class="container">
         <div id="branding">
          <a href="index.html">
           <h1><span class="highlight">Acme</span> Web Design</h1>
         </a>
        </div>
       </div>
</header>

Answer 5

Put

color:white;

inside

header a:link{}