CSS Links
CSS links are a bit different. They are more complicated than other types of elements because they can exist in multiple states: an universal link, a visited link, an active link, and a link that the user currently has the pointer over. Using CSS, you can change color of a link when the user mouse over it (referred to as the hover state) as opposed to when he's currently checking it (the active state). Another advantage of CSS is that you can change the color schemes for links on the same page rather than being forced to use one scheme throughout. CSS provides pseudo-classes that apply to links in particular states, as follows:
- a : link - Applies to unvisited link.
- a : visited - Applies to link that the user have visited.
- a : hover - Applies to links when the user has her mouse pointer over the link.
- a : active - Link the a link attribute, this selector is used when the user is clicking on the link.
Example
<!DOCTYPE html>
<html>
<head>
<title> CSS Links </title>
<style>
a:link {
color : red;
background-color : #FFFF00;
}
a:visited {
a:visited {
color : green;
}
a:hover {
color : orange;
background-color : #800080;
}
a:active {
color : blue;
}
</style>
</head>
<body>
<p> <b> <a href = "https:\\www.google.com" target = "_blank"> Go to Google </a> </b> </p>
<p> <b> <a href = "https:\\www.facebook.com" target = "_blank"> Go to Facebook </a> </b> </p>
<p> <b> <a href = "https:\\www.youtube.com" target = "_blank"> Go to YouTube </a> </b> </p>
<p> <b> <a href = "https:\\www.amazon.com" target = "_blank"> Go to Amazon </a> </b> </p>
<p> <b> <a href = "https:\\www.twitter.com" target = "_blank"> Go to Twitter </a> </b> </p>
</body>
</html>
NOTES.....
- Pseudo-classes are most commonly used with links, but there are a number of other pseudo-classes that can also be used.
- You can use pretty much any property you like with pseudo-selectors for links, and browsers that support them will dynamically reflow the page to accommodate the change.