Featured Templates
Home
HTML and CSS
Tutorials
Links and Pseudo-Classes in CSS
Added: June 26, 2008 Rating: 
Level: Experienced Software:
Dreamweaver
Level: Experienced Software:
Dreamweaver
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!
More HTML and CSS: Most Popular Materials | Fresh Materials
| More HTML Tutorials at Markuptutorials.com
10 Random HTML and CSS Tutorials :
10 Random Markuptutorials.com Materials: