We have learned in previous post of dynamic pseudo-classes add various types of special effects such as changing the color of visited and unvisited links, to the A element. The dynamic pseudo-classes include :link, :visited, :hover, :active, and :focus classes.
Now create two WebPages named dynamicpc1.html and dynamicpc2.html file
<!doctype html>
<head>
<style type="text/css">
a:link{color:red;}
a:visited{color:green;}
a:active{color:orange;}
</style>
</head>
<body><h1><a href="dynamicpc2.html">Dynamic Pseudo classes page2</a></h1>
</body>
</html>
a link to the dynamicpc2,html file is created by using the A element of HTML. The :link pseudo-class displays the link in red color, the : active pseudo-class displays the activated link in orange color and the :visited pseudo-class displays the link in the green color after visiting the dynamicps2.html file.
Now create second Webpage dynamicpc2.html file
<!doctype html>
<head>
<style type="text/css">
a:focus{border-width:10;border-style:solid;border-color:black;background-color:lime;}
p:hover{background-color:yellow;color:green;}
</style>
</head>
<body>
<h1><A href="dynamicpc1.html">dynamic pseudo-classes page 1</A></h1>
<p>
This is the paragraph This is the paragraph This is the paragraph This is the paragraph
This is the paragraph This is the paragraph This is the paragraph This is the paragraph
This is the paragraph This is the paragraph This is the paragraph This is the paragraph
This is the paragraph This is the paragraph This is the paragraph This is the paragraph
This is the paragraph This is the paragraph This is the paragraph This is the paragraph
This is the paragraph This is the paragraph This is the paragraph This is the paragraph
This is the paragraph This is the paragraph This is the paragraph This is the paragraph
</p>
</body>
</html>
Here A paragraph is created by using the P element and link to the dynamicpc2.html file is created by using the A element.
We can see a link to the dynamicpc1.html file in red color. When we click the link the color of the link changes to orange.
if we keep the mouse pointer on the text we see the hover effect on the text.
Now create two WebPages named dynamicpc1.html and dynamicpc2.html file
<!doctype html>
<head>
<style type="text/css">
a:link{color:red;}
a:visited{color:green;}
a:active{color:orange;}
</style>
</head>
<body><h1><a href="dynamicpc2.html">Dynamic Pseudo classes page2</a></h1>
</body>
</html>
a link to the dynamicpc2,html file is created by using the A element of HTML. The :link pseudo-class displays the link in red color, the : active pseudo-class displays the activated link in orange color and the :visited pseudo-class displays the link in the green color after visiting the dynamicps2.html file.
Now create second Webpage dynamicpc2.html file
<!doctype html>
<head>
<style type="text/css">
a:focus{border-width:10;border-style:solid;border-color:black;background-color:lime;}
p:hover{background-color:yellow;color:green;}
</style>
</head>
<body>
<h1><A href="dynamicpc1.html">dynamic pseudo-classes page 1</A></h1>
<p>
This is the paragraph This is the paragraph This is the paragraph This is the paragraph
This is the paragraph This is the paragraph This is the paragraph This is the paragraph
This is the paragraph This is the paragraph This is the paragraph This is the paragraph
This is the paragraph This is the paragraph This is the paragraph This is the paragraph
This is the paragraph This is the paragraph This is the paragraph This is the paragraph
This is the paragraph This is the paragraph This is the paragraph This is the paragraph
This is the paragraph This is the paragraph This is the paragraph This is the paragraph
</p>
</body>
</html>
Here A paragraph is created by using the P element and link to the dynamicpc2.html file is created by using the A element.
We can see a link to the dynamicpc1.html file in red color. When we click the link the color of the link changes to orange.
if we keep the mouse pointer on the text we see the hover effect on the text.
No comments:
Post a Comment