CSS syntax Free Web Design Tutorials
Home   HTML CSS JavaScript PHP MySQL Usability Glossary
CSSBasicsImplementing CSSCSS SyntaxCSS Pseufo Classes and Pseudo ElementsPseudo Classes/ElementsCSS ClassesCSS PropertiesFontColor and BackgroundTextBorderMargins and PaddingSize and Position

Home > CSS > CSS Pseudo Classes/Elementsprinter version

CSS Pseudo Classes/Elements

CSS pseudo classes and pseudo elements allow you to add extras to some HTML elements.

Pseudo-classes

Pseudo-classes allow you to add additional control to some elements, normally links and the syntax is ...
tag: pseudo-class {
property: value
}


The pseudo classes that apply to links (i.e. the anchor <a> element) are ...

Example of pseudo-classes Applied to Links
a: link {
color: #0000ff
}
a: visited {
color: #ff00ff
}
a: hover {
color: #ff0000
}
a: active {
color: #00ff00
}


The rules above result in ...

Note: For hover to work properly it must come after link and visited. For active to work properly it must come after hover.


Pseudo-elements

Pseudo-elements give control over commonly used text elements and two of the most common are ...

The syntax for pseudo-elements is ...
tag: pseudo-element {
property: value
}


Example of first-line pseudo-element
p: first-line {
color: #0000ff
}


The rule above causes the first line of text within the paragraph to be blue.

Example of first-letter pseudo-element
p: first-line {
color: #ff0000
}


The rule above causes the first letter of text within the paragraph to be red.

Previous - CSS Syntax Previous - CSS Syntax     Next - CSS Classes Next - CSS Classes


Privacy | Terms | Contact | Links | Sitemap | RSS Feeds RSS and JavaScript Feeds
©2009 www.webdesignworkmate.co.uk all rights reserved 
Design and Production by smallbizonline website design © 2000-2009
Valid HTML 4.01! Level Double-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0Valid CSS!
Tips and TricksMenu ButtonsSpecial Effects
Recommended Reading
CSS - the missing manual

The CSS anthology

Beginning CSS web development