PSEUDO CLASSES:
Pseudo selectors are hover , active, visited and link.
BASIC SYNTAX:
selector: pseudo-class{
Property : value;
}
1. VISITED:
The visited is the pseudo class which decides the action to perform when a an element say a link or a button is visited. we may change color of a link if it is already visited.
2. ACTIVE:
The active class is used when we want to apply actions when we focus on the element by clicking mouse button on it.
3.HOVER:
The hover is the most important class which tells the element what to do when mouse hover over it.
4.LINK:
I link class we may write code about how our element should look like when it is neither hovered, visited or focused.
5. BEFORE:
To place text before all the other components on the web page.
6. AFTER:
To place text after all the other components on the web page.
Example:
/*The Examples shows the working of all four classes : */
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pseudo class</title>
<style>
/*a{
font-family:"Times New Roman", Times, serif;
transition:4s;
color:#FF3399;
background:#FFFF00;
width:120px;
height:50px;
font-size:30px;
font-style: italic;
font-weight: bold;
}*/
/*How a link should look like before visit, focus and hover*/
a:link{
font-family:Geneva, Arial, Helvetica, sans-serif;
color:#999999;
transition:3s;
background:#CC0033;
font-style:oblique;
font-weight:bold;
width:140px;
}
/*How a link should look like if it is visited*/
a:visited{
font-family:Georgia, "Times New Roman", Times, serif;
color:#CC66FF;
transition:3s;
background:#330099;
font-style:italic;
font-weight:normal;
width:100px;
}
/*How a link should look like if the mouse hover over it*/
a:hover{
font-family:"Courier New", Courier, monospace;
color:#009900;
transition:3s;
background:#000000;
font-size:24px;
font-style:normal;
font-weight:normal;
width:150px;
}
/*How a link should look like if it is focused by clicking mouse button over it*/
a:active{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FF0000;
transition:3s;
background:#999999;
font-style:normal;
font-weight:bold;
width:110px;
}
</style>
</head>
<body>
<a href="https://webtechcourse.blogspot.com/">Click here</a>
</body>
</html>
0 Comments