www.pickatutorial.com Computer Tutorials
Top eBooks: C/C++ | C# | Android | Mathematics | Database | Cloud | Graphics | Networking | Oracle | Hardware | AI
Top Tutorials: C/C++ | C#.NET | PHP MySQL | Java | Java Script | jQuery | HTML | xHTML | HTML5 | VB Script| CSS
Lessons CSS Working with Links Bookmark and Share
Tutorial Home
Lesson 1
Lesson 2
Lesson 3
Lesson 4
Lesson 5
Lesson 6
Lesson 7
Lesson 8
Lesson 9
We can well apply the CSS properties to links that we have already learned in the previous lessons. We can change link colors and fonts, for example, quite easily.

In addition to the above, in this lesson, we will explore something special about the links i.e. the Pseudo-classes.

CSS allows us to apply properties to links differently depending on whether the link is unvisited, visited, active, or whether the pointer is on the link. This enables us to add some useful and fancy styles and effects to our links.

To achieve the above we use CSS pseudo-classes. A CSS pseudo-class allows us to apply different properties to an HTML tag, taking into account different conditions or events it may have.

As links in HTML are created using the <a> tag, we can apply CSS styles to links as follows:

a {
color: yellow;
}

The above code would make the links appear in yellow color.

As explained earlier a link can have different states; e.g. active, visited, unvisited or it may have the pointer over it. We can use CSS pseudo-classes to assign different styles to all of the above different states of the links.

':link' Pseudo-class

We use the pseudo-class :link for links leading to pages that the user has not visited already.

The following code would make all unvisited links appear in red color:

a:link {
color: red;
}

':visited' Pseudo-class

As its name suggests we use the pseudo-class :visited for links leading to pages that the user has already visited.

The following code would make all visited links appear in orange color:

a:visited {
color: orange;
}

':active' Pseudo-class

We use the pseudo-class :active for links that are active and have focus on them.

The following code would make all active links appear in green color:

a:active {
color: green;
}

':hover' Pseudo-class

We use the pseudo-class :hover when the mouse pointer hovers over a link.

The following code would make our links appear in green color with a yellow background:

a:hover {
color: green;
background-color: yellow;
}


Next >>> Lesson No. 8: CSS class and id






Home - Advertise - Contact - Disclaimer - About Us
© Since 2006 pickatutorial.com -- All Rights Reserved.