Home arrow Style Sheets arrow Page 3 - CSS: Pseudo
STYLE SHEETS

CSS: Pseudo


We left off learning about the various positions in CSS. In this tutorial we will cover the pseudo classes and pseudo elements, which allow us to add special effects to our selectors. An example would be roll-over effects on hyperlinks, or making the first letter of a sentence larger and a different color than the rest of the text.

Author Info:
By: James Payne
Rating: 4 stars4 stars4 stars4 stars4 stars / 4
May 19, 2008
TABLE OF CONTENTS:
  1. · CSS: Pseudo
  2. · Dealing with the :first Line Pseudo Element
  3. · Pseudo Classes
  4. · A Preview of Mouse-over Effects

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
CSS: Pseudo - Pseudo Classes
(Page 3 of 4 )

As we said before, pseudo-classes allow you to soup up those selectors. Here, in our first example, we will work with hyperlinks:


<html>

<head>

<style type="text/css">

a:link {color: red}

a:visited {color: purple}

a:hover {color: #0000FF}

a:active {color: orange}

</style>

</head>

<body>

<p><b><a href="http://www.devshed.com" target="_blank">Visit Developer Shed today!</a></b></p>

</body>

</html>

You can change your hyperlink in other ways like so:


<html>

<head>

<style type="text/css">

a.first:link {color: purple}

a.first:visited {font-size: 200%}

a.first:hover {background: yellow; font-size: 90%; font-family: Impact}

a.second:link {color: #ff0000}

a.second:visited {color: orange}

a.second:hover {color: red; text-decoration: underline overline; font-size: 150%}

</style>

</head>

<body>

<p><b><a class="first" href="http://www.aspfree.com" target="_blank">Click here to visit ASP FREE!</a></b></p>

<p><b><a class="second" href="http://www.seochat.com" target="_blank">Click here to visit SEO CHAT!</a></b></p>

</body>

</html>

There are other pseudo classes, such as the :first child and the :lang, but we will skip those for now (look for an explanation of them in my upcoming XHTML tutorial).


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...
- CSS3 Animated Image Gallery: Transitions
- CSS3 Properties: Fixed Heights with box-sizi...
- CSS3 Properties: Altering Strokes and 3D Eff...
- CSS3 Properties: Text-Stroke
- CSS3 Transitions: Width and Height Properties
- Creating a Drop Down Menu in CSS3
- Intro to CSS Transitions

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 1 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials