CSS Tutorials : Lesson 13 : Pseudo Classes

CSS Tutorials : Lesson 13 – Pseudo Classes

In this tutorial you will learn about Cascading Style Sheets (CSS) - Pseudo Classes, Link, First letter and First line

CSS has pre-defined pseudo classes.
pseudo class has special syntax, the rule starts with the selector, then the pseudo class, and finally the declaration, the selector and the pseudo class are separated with a colon “:”.

CSS defines the following pseudo classes:
link, hover, active visited, first-line, and first-letter.

Link

To define link properties, you can use four pseudo classes, they are:

• link: sets the style of the unvisited link.
• hover: sets the style of the link when mouse goes over it.
• active: sets the style of the link when activated.
• visited: sets the style of the visited link.

Example:

a:link
{
color: #0000FF;
}
a:visited
{
color: #FF0000;
}
a:hover
{
color: #00FF00;
}
a:active
{
color: #0000FF;
}

This sets the link color to be in blue when unvisited and when active, to be in red when visited, and to be in green when mouse goes over it.

First letter

To set a different style for the first letter of an element, use the pseudo class “first-letter”, this can set the first letter font, color, and text properties.

Example:

p
{
font-size: 10px;
}
p: first-letter
{
color: red;
}

This will display the first letter of the element < p > in red color.

First line

To set a different style for the first line of an element, use the pseudo class “first-line”, this can set the first line font, color, and text properties.

Example:

p
{
font-size: 10px;
}
p: first-line
{
color: red;
}

This will display the first line of the element < p > in red color.