Marusya's School Notes

Link States

Links can be styled differently depending on what state they are in.
The four link states are:

a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked

When setting the style for several link states, there are some order rules:

a:hover MUST come after a:link and a:visited
a:active MUST come after a:hover

HTML file:	Displayed by browser:
<style> a:link { color: #ff0000; } /* unvisited link in red / a:visited { color: #00ff00; } / visited link in bright green / a:hover { color: #ff00ff; } / mouse over link in pink / a:active { color: #0000ff; } / selected link in blue */ </style> <body> <p><b><a href="text_hey.html" target="_blank">Do NOT click on this unvisited link!</a></b></p> <p><b><a href="index.html" target="_blank">Click on this link to see the changes.</a></b></p> <p><b>Note:</b> In this example, the link changes color depending on what state it is in. It will be red if you have not clicked on it.</p> <p>If the link is bright green, then that means that you have already clicked on it. </p><p>To see this link in an unvisited color again, clear your internet history from your browser's tools or settings menu. Refresh the page and the link should change to red.</p> <p>The selected color (blue) will only appear briefly, in a blink of the eye, just before it takes you to the new webpage.</p> </body>	Do NOT click on this unvisited link! Click on this link to see the changes. Note: In this example, the link changes color depending on what state it is in. It will be red if you have not clicked on it. If the link is bright green, then that means that you have already clicked on it. To see this link in an unvisited color again, clear your internet history from your browser's tools or settings menu. Refresh the page and the link should change to red. The selected color (blue) will only appear briefly, in a blink of the eye, just before it takes you to the new webpage.

HTML file:

Displayed by browser:

<body>
<a href="text_hey.html" target="_blank">Do NOT click on this unvisited link!</a>
<a href="index.html" target="_blank">Click on this link to see the changes.</a>
Note: In this example, the link changes color depending on what state it is in. It will be red if you have not clicked on it.
If the link is bright green, then that means that you have already clicked on it. To see this link in an unvisited color again, clear your internet history from your browser's tools or settings menu. Refresh the page and the link should change to red.
The selected color (blue) will only appear briefly, in a blink of the eye, just before it takes you to the new webpage.
</body>

Do NOT click on this unvisited link!

Click on this link to see the changes.

Note: In this example, the link changes color depending on what state it is in. It will be red if you have not clicked on it.

If the link is bright green, then that means that you have already clicked on it.

To see this link in an unvisited color again, clear your internet history from your browser's tools or settings menu. Refresh the page and the link should change to red.

The selected color (blue) will only appear briefly, in a blink of the eye, just before it takes you to the new webpage.