CSS pseudo-classes are used to add special effects to some selectors.
Syntax
selector:pseudo-class {property:value;}
CSS classes can also be used with pseudo-classes:
selector.class:pseudo-class {property:value;}
Basically there are four pseudo classes that can be used safely when applied to links.
- link is for an unvisited link.
- visited is for a link to a page that has already been visited.
- active is for a link when it is gains focus (for example, when it is clicked on).
- hover is for a link when the cursor is held over it
<style>
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:active {
color: red;
}
a:hover {
text-decoration: none;
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<a href="#"><h2>Home</h2></a>
</body>
Pseudo-classes and CSS Classes
Pseudo-classes can be combined with CSS classes. This gives us flexibility to define different styles on links.
<style>
a.main:link {
color: blue;
}
a.main:visited {
color: purple;
}
a.main:active {
color: red;
}
a.main:hover {
text-decoration: none;
color: blue;
background-color: yellow;
}
a.sub:link {
color: purple;
}
a.sub:visited {
color: blue;
}
a.sub:active {
color: red;
}
a.sub:hover {
text-decoration: none;
color:#0C0;
background-color: yellow;
}
</style>
</head>
<body>
<a class="main" href="#"><h2>Home</h2></a>
<a class="sub" href="#"><h2>About Us</h2></a>
</body>
powered by multimediagyan ©
No comments:
Post a Comment