/* A link that hasn’t been visited. */
a:link { color: red; }

/* After you’ve visited the link. */
a:visited { color: purple; }

/* Change the color when the mouse is over it. */
a:hover { color: fuchsia; }

/* And when the mouse is clicked. */
a:active { color: maroon; }
<!DOCTYPE html>
<html>
	<head>
		<title>Pseudo-classes</title>
		<link href="style.css" rel="stylesheet">
	</head>
	<body>
		<p>This is a paragraph with <a href="#">a link</a> in it.</p>
		<p>And another one with <a href="/topic/css">another link</a>.</p>
	</body>
</html>