www.kdwebpagedesign.com
BASIC HTML ::
BASIC CSS ::
USER Tools ::
JavaScript Tricks ::
Other Information ::
Donations ::
Do you find our Tutorials helpful? Are the free Auction Templates helping your sales? Donations of any amount are appreciated to help keep this site up and running!
ONE-TIME DONATIONS:
$


MONTHLY DONATIONS:
$ for mths.
KD Web Page Design Tutorials

Hyperlinks/CSS

Decorating hyperlinks is one of the most common uses of CSS on the Web today. Just about every link that you've seen that changes color, fonts, backgrounds, becomes underlined or just about any other change when the mouse is on, off or clicking or not clicking on a link is due to CSS. What was once only accomplished with Javascript, is now as easy to do as changing font size and color.

You can use CSS to change the appearance and behavior of hyperlinks. The a:hover must be placed after the a:link and a:visited rules, since otherwise the cascading rules will hide the effect of the a:hover rule. Similarly, because a:active is placed after a:hover, the active color will apply when the user both activates and hovers over the a element. The link below is a little on the wild side, but it will give you a good idea of all the possibilities.

<style type="text/css">
<!--
#samplelink a:link {
  font-family: arial, helvetica, sans-serif;
  font-size: 20px;
  color: #ff6600;
  text-decoration: none;
}
#samplelink a:visited {
  font-family: arial, helvetica, sans-serif;
  font-size: 20px;
  color: #ff6600;
  text-decoration: line-through;
}
#samplelink a:hover {
  font-family: arial, helvetica, sans-serif;
  color: #7c7e01;
  font-weight: bold;
  text-decoration: underline;
  background-color: #d4dda6;
}
#samplelink a:active {
  font-family: arial, helvetica, sans-serif;
  font-size: 20px;
  color: #ff6600;
  text-decoration: none;
}
-->
</style>
eBayThe above example can only be achieved by using embedded or linked style sheets which should not be used on eBay. If you would like to have your link colors match your page, the code below can be used.
LINK
<a href="#" style="color: #ff6600; text-decoration: none;" onMouseOver="this.style.color='#7c7e01';" onMouseOut=" this.style.color='#ff6600';"><b>LINK</b></a>

To Top TO TOP