You can use simple cascading style to make your hyperlinks come alive. The following four examples use cascading style sheets (CSS) to create custom hyperlinks. Try out any one of them by modify the code in your web site and see the power of CSS.
Enjoy!!!
Example One: Create hyperlinks in which the underline formatting is displayed in a different color
Create a file call linktest.html and save the following code using any text editor and test it out on any browser
<head>
<style>
body { color: black; background-color: white; font-family: arial }
a { color: black; text-decoration: none; border-bottom-style: solid; border-bottom-width: 1px }
a:link { border-bottom-color: blue } a:visited { border-bottom-color: purple }
a:hover { border-bottom-color: green } a:active { border-bottom-color: red }
</style>
</head>
<body>
<p>Please see <a href=”http://www.kwunho.com”>http://www.kwunho.com</a> for more css tutorial info.</p>
</body>
Example two: Create hyperlinks that use hover buttons
This example creates hyperlinks that use hover buttons that have a solid background.
<head>
<style>
body { color: black; background-color: white; font-family: arial }
a { text-decoration: none; padding: 3px }
a:link { color: white; background-color: blue }
a:visited { color: white; background-color: purple }
a:hover { color: white; background-color: green }
a:active { color: white; background-color: red }
</style>
</head>
<body>
<p>Please see <a href=”http://www.kwunho.com”>http://www.kwunho.com</a> for more css tutorial info.</p>
</body>
Example 3: Create hyperlinks that use outline hover buttons
This example creates hyperlinks that use outline hover buttons. When you rest on these hyperlinks, a colored box appears around the hyperlink text. This creates an outline effect.
<head>
<style>
body { color: black; background-color: white; font-family: arial }
a { color: black; text-decoration: none; border-style: solid; border-width: 2px; padding: 2px }
a:link { border-color: blue } a:visited { border-color: purple }
a:hover { border-color: green } a:active { border-color: red }
</style>
</head>
<body>
<p>Please see <a href=”http://www.kwunho.com”>http://www.kwunho.com</a> for more css tutorial info.</p>
</body>
Example 4: Create hyperlinks that use different text formatting
This example formats hyperlinks to use non-underlined, italic, lowercase text. When you rest on these hyperlinks, the text becomes uppercase.
<head>
<style>
body { color: black; background-color: white; font-family: arial }
a { text-decoration: none; font-style: italic; text-transform: lowercase }
a:link { color: blue; font-weight: bold } a:visited { color: purple }
a:hover { color: green; text-transform: uppercase }
a:active { color: red }
</style>
</head>
<body>
<p>Please see <a href=”http://www.kwunho.com”>http://www.kwunho.com</a> for more css tutorial info.</p>
</body>
