15. Links

<PLEASE USE THIS TEMPLATE TO HELP YOU CREATE A GREAT POST!>

<Below this line, add a link to the EXACT exercise that you are stuck at.>
https://www.codecademy.com/en/courses/web-beginner-en-WF0CF/3/2?curriculum_id=50579fb998b470000202dc8b

<Below this line, in what way does your code behave incorrectly? Include ALL error messages.>

I’m not getting any error messages, in fact Codeacademy passes me to the next topic. But I thought the point of this exercise was to show something different happening when you hover over or click on a link. Nothing happens to any of my links when I hover or click on them. Did I miss something?

```
  1. Ly's Portfolio
  2. Definition of a dragon
  3. Yugioh dragon
  4. </ol

CSS
a:link{
text-decoration:none;
color:#008B45;
}
a:hover{
color:#00FF00;
}
a:visited{
color:#EE9A00;
}

<do not remove the three backticks above>

The CSS may not be getting parsed due to the above malformed ENDTAG.

Also,

Stray endtag to remove.

I don’t see any issues with the CSS, though I would recommend a leading space before the left curly brace. It makes reading and debugging easier.

a:link {

}
a:hover {

}

The psuedo-class that applies to a ‘click’ is,

a:active {

}

For tracking visited links,

a:visited {

}

For tracking the Tab key around the links,

a:focus {

}

When writing these all into the stylesheet, the order in which we write them is important.

a
a:link
a:visited
a:hover
a:focus
a:active

LiVe HAppy. :hover and :focus can be written in either order.

Yes! It works! I didn’t realize there was an order =)

1 Like

Say we want our links to be blue, but we want the visited links to be purple.

If we write

a: visited {}
a: link {}

none fo the visited links will be purple because the next rule turns them blue.

Both of these need be above :hover or its rule will never be applied. Same with active, it has to come last or its rule will never apply.