15. Links


#1


https://www.codecademy.com/en/courses/web-beginner-en-WF0CF/3/2?curriculum_id=50579fb998b470000202dc8b

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?


<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title></title>
	</head>
	<body>
		<div>
		<ol>
		<li><a href="https://zamasmiths.myportfolio.com">Ly's Portfolio</a></li>
		<li><a href="http://www.dictionary.com/browse/dragon">Definition of a dragon</a></li></li>
		<li><a href="http://yugioh.wikia.com/wiki/Dragon">Yugioh dragon</a></li>
		</ol
		</div>
	</body>
</html>


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


#2

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.


#3

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


#4

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.


#6