Issue with link styling.

Question

HI all,

For some reason when I click on a link the color does not revert back to orange from light blue, any guess as to the issue?

/* Type selectors */

body {
  color: #878787;
  margin: 0;
  font: 1em/1.5 "Helvetica neue", Helvetica, Arial, sans-serif;
}

h1 {
  font-size: 5.625rem; /* 90px / 16px */
  color: rgba(255, 255, 255, 1);
  text-transform: uppercase;
  font-weight: normal;
  line-height: 1.3;
}

h2 {
  font-size: 53px;
  text-decoration: underline;
  font-weight: normal;
  margin-bottom: .5em;
}

h3 {
  font-size: 20px;
  color: #48525c;
  margin-bottom: 1.7em; /* 34px */
}

/* li {
  display: inline-block;
  padding: 0 12px;
  border: solid 1px;
  margin: 80px 0;
} */

/* ID selectors */

.callout {
  font-size: 1.25em;
  border-bottom: 3px solid;
  padding: 0 9px 3px;
  margin-top: 20px;
  display: inline-block; 
}

.main-footer {
  padding-top: 60px;
  padding-bottom: 60px;
  border-bottom: solid 10px orange;
  text-align: center;
}

/* Class selectors */

.main-header {
  background-color: orange;
}

.title {
  color: white;
  font-size: 1.625rem; /* 26px / 16px */
}

.primary-content,
.secondary-content {
  width: 60%;
  margin: auto;
}

.wildlife {
  color: white;
  background-color: #434a52;
  padding: 18% 24%;
  border-top: 10px solid #ffa949;
  margin: 105px 0 60px;
}

.primary-content,
.main-header {
  text-align: center;
}

.t-border {
  border-top: 2px solid lightgrey;
}

/* Pseudo Class selectors */

a:link {
  color: rgb(255, 169, 73);
  text-decoration: none;
}

a:visited {
  color: lightblue;
}

a:hover {
  color: rgba(255, 169, 73, 0.4);
}

a:active {
  color: lightcoral;
}

a:focus {
  color: white;
  background-color: orange;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Lake Tahoe</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <header id="top" class="main-header">
      <span class="title">Journey Through the Sierra Nevada Mountains</span>
      <h1>Lake Tahoe, California</h1>
    </header>
        <div class="primary-content t-border">
            <p class="intro">
                Lake Tahoe is one of the most breathtaking attractions located in California. It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions. Snow and skiing are a significant part of the area's reputation.
            </p>
            <a class="callout" href="#more">Find out more</a>

      <div class="wildlife">
        <h2>Check out all the Wildlife</h2>
        <p>
          As spawning season approaches, the fish acquire a humpback and protuberant jaw. After spawning, they die and their carcasses provide a feast for gatherings of <a href="#mink">mink</a>, <a href="#bears">bears</a>, and <a href="#eagles">bald eagles</a>.
        </p>
      </div>

            <a class="callout" href="#wildlife">See the Wildlife</a>
        </div><!-- End .primary-content -->

        <div class="secondary-content t-border">
      <div>
        <h3>From Tents to Resorts</h3>
        <p>
          Lake Tahoe is full of wonderful places to stay. You have the ability to sleep in the outdoors in a tent, or relax like a king at a five star resort. Here are our top three resorts:
        </p>
        <ul>
          <li><a href="#hotels">Lake Tahoe Resort Hotel</a></li>
          <li><a href="#resorts">South Lake Tahoe Resorts</a></li>
          <li><a href="#lodging">Tahoe Ski Resort Lodging</a></li>
        </ul>
      </div>
      <div>
        <h3>Pack Accordingly</h3>
        <p>
          One of most important things when it comes to traveling through the great outdoors is packing accordingly. Here are a few tips:
        </p>
        <ol>
          <li>Bring layers of clothing</li>
          <li>Pack sunscreen</li>
          <li>Carry extra water just in case</li>
          <li>Pack light</li>
        </ol>
      </div>
        </div><!-- End .secondary-content -->

        <footer class="main-footer">
            <p>All rights reserved to the state of <a href="#">California</a>.</p>
            <a href="#top">Back to top &raquo;</a>
        </footer>
  </body>
</html>

Answer 1 · 2015-08-10T15:59:21Z

August 10, 2015 3:59pm

To my understanding of the W3C documentation, the :visited pseudo class applies to any link already visited and does not revert back (unless one would delete files from its browser folder).

http://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:visited

I don't really see what you wanted to do, but maybe I didn't understand your question.

Hope this helps anyway :)

Answer 2 · 2015-08-10T15:57:54Z

August 10, 2015 3:57pm

Because you set

a:visited {
  color: lightblue;
}

Answer 3 · 2015-08-10T16:05:16Z

August 10, 2015 4:05pm

Caleb, Once the link is visited, it will change permanently to that color.

Answer 4 · 2015-08-10T16:43:58Z

August 10, 2015 4:43pm

You can go ahead and set the :visited pseudo class selector the same as your desired default color, that way the color never changes:

a {
color: red;
}
a:visited {
color: red
}
a:hover {
color: blue;
}

I hope this helps.

Answer 5 · 2015-08-10T16:10:07Z

August 10, 2015 4:10pm

So, what is Guil doing to change it back?

Answer 6 · 2015-08-10T16:12:00Z

August 10, 2015 4:12pm

What lesson are you referring to ?

Answer 7 · 2015-08-10T16:22:26Z

August 10, 2015 4:22pm

The CSS basic course, in the video on pseudo classes the links stay the same color, but in this video they are back to the orange color.

Answer 8 · 2015-08-10T16:49:48Z

August 10, 2015 4:49pm

Thanks for the replies and clearing up my confusion y'all!

Welcome to the Treehouse Community

Looking to learn something new?

Caleb Kleveter

Caleb Kleveter

Issue with link styling.

8 Answers

Jeremy Diallo

Jeremy Diallo

nguyen manh

nguyen manh

Aaron HARPT

Aaron HARPT

Jacob Mishkin

Jacob Mishkin

Caleb Kleveter

Caleb Kleveter

Jeremy Diallo

Jeremy Diallo

Caleb Kleveter

Caleb Kleveter

Caleb Kleveter

Caleb Kleveter