Links and Pseudo-Classes in CSS
Today we learn about Links and Pseudo-Classes in CSS. I have made tutorials about rollover’s here and here, but this is something different and we talk about links & elements where we can put Pseudo-Classe, on a div, text,etc…
Pseudo-Classes:
:link
:visited
:active
:hover
:focus
We start with an exemple to use :hover pseudo-class on a image
[1] Let’s create the CSS:
<style type=”text/css”>
body {
background-image: url(”bg.gif”);
}
img {
border-width: 4px;
border-color: #CCCCCC;
border-style: solid;
img:hover {
border-color: white;
}
div {
height: 10px;
width: 80px;
}
div:hover {
background-color: #CCCCCC;
color: white;
}
</style>
[2] Now we need to create the HTML:
<html>
<head>
<style type=”text/css”>
body {
background-image: url(”bg.gif”);
}
img {
border-width: 4px;
border-color: #CCCCCC;
border-style: solid;
img:hover {
border-color: white;
}
div {
height: 10px;
width: 80px;
}
div:hover {
background-color: #CCCCCC;
color: white;
}
</style>
</head>
<body>
<br><br>
<center>:hover Pseudo-Class on a element (img)
<br><br>
<img src=”css.png”>
<br><br>
:hover Pseudo-Class on a element (div)
<br><br>
<div>PiticStyle<div>
</body>
</html>
That’s it! You can create this for any element you want ( paragaphs, headings, links, etc). From here you can download my files and HERE is the final result. Thank you!
Tags: :hover syntax, cascade style sheet, CSS, how to, HTML, Links in CSS, Pseudo-Classes, rollovers, Tips & Tricks, tutorial, w3c