Create Link Boxes

This example demonstrates a more advanced example, where several CSS properties are combined to display links as boxes:

HTML file: Displayed by browser:
<style>
a:link, a:visited {
    display: block;
    font-weight: bold;
    color: #ffffff; /* text color is white */
    background-color: #98bf21; /* dull green */
    width: 280px;
    text-align: center;
    padding: 4px;
    text-decoration: none;
}
a:hover, a:active {
    background-color: #7A991A; /* darker dull green */
}
</style>
<body>
<p><b><a href="text_hey.html" target="_blank">Don't 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><a href="index.html" target="_blank">I dissappear when visited!</a></b></p>
</body>

Don't click on this unvisited link!

Click on this link to see the changes.

I dissappear when visited!

I accidentally discovered how to get a visited link to be invisible in Internet Explorer!! I guess with the background of the page being the same as the text color, and not specifying the green background colors, the link dissappears! Mouse over it and it appears! I think it's so cool! But my question is this: Is it legal markup language? Sadly, this doesn't work in Chrome and Firefox, though...

Back button Table of Contents Next button