Sunday, October 2, 2011

15 - pseudo-classes


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