Links All CSS properties can be applied on links (i.e. change colors, fonts, underline, etc). The new thing is that CSS allows you to define these properties differently depending on whether the link is unvisited, visited, active, or whether the cursor is on the link. This makes it possible to add fancy and useful effects to your website. To control these effects you use so-called pseudo- classes.

Pseudo-Class A pseudo-class allows you to take into account different conditions or events when defining a property for an HTML tag. As links are specified in HTML with tags. We can therefore use ‘a’ as a selector in CSS: a { color: blue; }

Pseudo-class: link The pseudo-class :link is used for links leading to pages that the user has not visited In the code example below, unvisited links will be light blue. a:link { color: blue; }

Pseudo-class: visited The pseudo-class :visited is used for links leading to pages that the user has visited. For example, the code below would make all visited links dark purple: a:visited { color: #660099; }

Pseudo-class: active The pseudo-class :active is used for links that are active. This example gives active links a yellow background color: a:active { background-color: #FFFF00; }

Pseudo-class: hover The pseudo-class :hover is used when the mouse pointer hovers over a link. This can be used to create interesting effects. For example, if we want our links to be orange and be italicized when the cursor is pointed at them, our CSS should look like this: a:hover { color: orange; font-style: italic; }

Pseudo-class: hover Example 1: Spacing between letters a:hover { letter-spacing: 10px; font-weight:bold; color:red; } Example 2: UPPERCASE and lowercase a:hover { text-transform: uppercase; font-weight:bold; color:blue; background-color:yellow; }

Example 3 Remove underline of links a { text-decoration : none; } Alternatively, you can set text-decoration along with other properties for all four pseudo-classes. a:link { color: blue; text-decoration : none; } a:visited { color: purple; text-decoration : none; } a:active { background-color: yellow; text-decoration : none; } a:hover { color : red; text-decoration : none; }