HTML : Using CSS to format hyperlinks
Introduction The formatting you applied to other elements in some of the previous articles can also be applied to hyperlinks. Moreover, you can apply these styles to hyperlinks depending upon the hyperlink’s state. You already know a hyperlink’s states from using the Web. Hyperlinks can be in one of five states: unvisited, moused-over, focused or active and visited. Before you click on a link, it is unvisited. As you move your mouse over the link, it is mousedover. When you actually click the link it is active. Alternatively, you could say a link has focus when it is actually clicked. After you have clicked the link, it’s visited. Using what’s called a pseudo-class, CSS allows you to specify a link’s appearance differently depending upon its state. A pseudo-class is so-named because there is no actual class. For example, there are no HTML hyperlinks classes called active, hover, link or visited. Active, hover, link, focus and visited are all adjectives describing the hyperlink class. The terms are not bona-fide classes, hence the term pseudo-class. There are more pseudo-classes than the font pseudo-classes discussed in this article. The other pseudo-classes are first-child and lang. There are also the following pseudo-elements: first-letter, first-line, before and after. Usage is the same as using pseudo-classes with hyperlinks. To illustrate the use of pseudo-classes and pseudo-elements, consider the first-child pseudo-class and the first-letter pseudo-element. Using the first-child pseudoclass, you specify that an element that occurs as another element’s first child has a style applied to it. For instance, p:first-child {color:orange;} makes any paragraph that is the first child of another element the colour orange. First-letter applies a style to the first letter of some text, for instance, p:first-letter {color:red;fontsize: x-large;} would make the first letter of any paragraph element the colour red and the size extra large. <body> <p>Test</p><p>Test Two</p> </body> </html> 
Formatting hyperlinks colour You can format links to have a different appearance depending upon the link’s state. You achieve this by using the link, visited, hover and active pseudo-classes. Pseudo-class and Result a:link {color:red;} unvisited links are red a:visited {color: green;} visited links are green a:hover {color:orange;} moused-over links are orange a:active {color:pink;} while being clicked, links are pink Formatting hyperlinks- lines, borders, background colours You can format pseudo-classes just as you can format other elements using CSS. You can apply borders, background colours, font styles and various other CSS formatting to the links depending upon their state. <html> <head> <title>Link States – CSS</title> <style> a:link{color: brown;} a:visited{color: black; text-decoration: none;} a:hover{color: red; background-color: khaki; border: 1px solid brown; text- transform: uppercase; padding: 2px;} a:active{color: orange;} </style> </head> <body> <ul> <li><a href=”http://www.abc.com” target=”_blank”>www.abc.com – abc</a></li> <li><a href=”http://www.xyz.com” target=”_self”>xyz </a></li> <li><a href=”http://www.123.html” target=”_top”> 123</a></li> </ul> </body> </html> Formatting image links As interesting as the last task was, there are always dangers when applying a global format to all elements in your site. The previous task’s special effects work fine for text links, but what about image links? What happens to an image in a hyperlink when you specify that a hyperlink has a border and background colour? The results are not what you would expect.
