Link color wont change despite CSS styling

Hi Joshua,

I hope this is helpful. First, is this in an external stylesheet? I'm confused by the <p> tags. If it's internal (in the same file as you html), you want it to sit in <style> tags. Sorry if I've missed anything obvious in the markup. Also, you might try adding !important to the color temporarily to see if that changes it. This can tell you if there is a problem with the code not inheriting the style the way you think it should.

... .copyright-legal a:link{ color: red !important; } ...

You don't want to force things with !important if unnecessary, but it can help you debug. Lastly, to keep your code DRY, you shouldn't need to repeat the font-family stack, font-size, margin, or padding in the :visited pseudo class because they haven't changed. If they are changing, you might have a problem with inheritance there as well.

Hope this helps narrow it down and isn't too long winded.

Best,

Wade

Sorry, I used an ellipse rather than \.

It's a vacation day :)

\\ .copyright-legal a:link{ color: red !important; } \\

Yes this is in an external style sheet. But now I'm really confused because I tried what you suggested and it made no change to the link. Then I tried something else I found at http://www.w3schools.com/tags/att_body_link.asp which mentioned editing the html by putting \ link="blue" \ in the body tag, except that I changed it to \ link="red" \ and placed it in the div tag where the link I'm trying to edit is contained. That didn't work. Then I tried adding the \ link="red" \ to the "a" tag itself, after the class name and that didn't work either. I don't understand why the formatting for the links in my navigation bar is being formatted correctly but the "legal notice" link will not respond to any formatting. I am trying to do the same formatting to a "legal notice" link at the bottom of a different sample web page I am working on and I am having the same issue on that page too.

Is there a way to remove default link styling from the entire page, regardless of where the links occur? And if so, would this be done in the HTML or the CSS?

Hi Joshua,

Is it possible to share the html that you're working on? Just a snippet of what you're trying to target would help. You could be missing a closing tag, have a misspelled class name, etc. If you can share the html you want to target, that would help. As a general rule, you don't want to put inline styles in the html like you see at that w3schools link. If you notice on their page, it says you should use css to do this. Also, is the styling for the links that is working also in the same external stylesheet?

Ok so there is going to be a lot of code here so bear with me. First is the html from the nav section of my page, followed by the CSS after it. Then, I will show the html and CSS for my "legal statement" link at the bottom of the page.

The reason the code is not DRY in the CSS is because I didn't include any regular "a" styling to the document since it was causing problems when I was trying to make multiple link styles. Thus, I wanted to make sure that there were no unwanted changes when the link went from normal to visited.

   <p>

    <div class="div1">
        <h1>XXXXXXXX Corporation</h1>
        <p></p>

    <div class="nav-style">

       <p><a href="#">Home</a>
          <a href="#">About Us</a>
          <a href="#">Project Gallery</a>
          <a href="#">News</a>
          <a href="#">Contact Us</a>
          <a href="#">Resources</a>
       </p>
      </div>

  </div>

   </p>

and then here is the CSS:

<p>
   .div1 {
    width: 1366px;
    height: 253px;
    background-color: black;
    margin-top: -68px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    position: relative;
    }

   .nav-style {
    width: 1200px;
    margin: 0 0 0 75px;
    padding-top: 1px;
}

   .nav-style a:link {
    text-decoration: underline;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    text-align: center;
    margin: 0 5px;
    font-size: 20px;
    padding-left: 90px;
    padding-top: 50px;
    position: relative;
    }

   .nav-style a:visited {
    text-decoration: underline;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    text-align: center;
    margin: 0 5px;
    font-size: 20px;
    padding-left: 90px;
    padding-top: 50px;
    position: relative;
}
</p>

Now here is the html for my copyright/legal statement section:

<p>
   <div class="div3">

         <div class="copyright-position">  
           <p>Copyright Joshua Porch 2014. Please see our <a href="#" class="copyright-legal">Legal Notice</a></p>
         </div>

   </div>
</p>

Now here is the CSS for my copyright/legal section:

<p>
   .div3 {
    width: 1366px;
    height: 550px;
    background-color: #688E23;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    text-decoration: none;
    position: absolute;
    z-index: 10;
    }

   .copyright-position {
    margin-top: 500px;
    margin-left: 50px;
    text-decoration: none;
    }

   .copyright-legal a:link {
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    color: red !important;
    font-size: 16px;
    margin: none;
    padding: none;
    }

   .copyright-legal a:visited {
    text-decoration: underline;
    font-family: Arial, Helvetica, sans-serif;
    color: red !important;
    font-size: 16px;
    margin: none;
    padding: none;
    }
</p>

Sorry for having so much code, I hope you can still understand where I'm coming from here. I only included the div info to show that I have not done anything to the formatting within the div that could be causing any problems.

Or you could make it

```a:visited.copyright-legal```

The problem is you are saying you have an element with the class .copyright-legal that has an a:link inside of it. In actuality, you have an a:link that has a class of copyright-legal. Do you get what I'm saying?

@ David May is right. You also don't need <p> tags in your css. Another thing to keep in mind when troubleshooting something like a link color is browser caching. Make sure you're actually seeing the results of your changes by clearing the cache or doing a hard refresh

If you are still having issues create a codepen.

David May your first answer was the best one. I tried to mark it as best answer but I'm not sure if I did it correctly. But yes, that worked just right for me. Thank you.