|Lessons||CSS Working with Links|
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:
The above code would make the links appear in yellow color.
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:
As its name suggests we use the pseudo-class :visited for links leading to pages that the user has already visited.
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:
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:
Next >>> Lesson No. 8: CSS class and id