PiticStyle » Pseudo-Classes http://www.piticstyle.com Articles, Tutorials about HTML, CSS, FLASH, PHP, MySQL, Photoshop, SEO, Tools for Webmasters, Media Thu, 02 Sep 2010 12:45:10 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 Links and Pseudo-Classes in CSS http://www.piticstyle.com/2007/10/28/links-and-pseudo-classes-in-css/ http://www.piticstyle.com/2007/10/28/links-and-pseudo-classes-in-css/#comments Sun, 28 Oct 2007 22:47:55 +0000 PiticStyle http://www.piticstyle.com/2007/10/28/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!

]]> http://www.piticstyle.com/2007/10/28/links-and-pseudo-classes-in-css/feed/ 0