|
LILLY ROBOT |
Links
You have already learnt about links in HTML. In CSS we are going to learn how to style our links with different colours, so your viewers can understand which sites they have visited.
| Links | CSS | Example |
|---|---|---|
| Unvisited Link - a:link The link has not been clicked on |
a:link{color:red;} | Visit HTML Site |
| Visited Link - a:visited When the link is clicked on. The colour changes from red to green |
a:visited{color:green;} | Visit HTML Site |
| Hover - a:hover The colour of the link changes from red to blue when the mouse is placed on the link. |
a:hover{color:blue;} |
Visit HTML Site |
| Active Link - a:active The colour of the link changes from red to purple when it is activated. |
a:active{color:purple;} |
Visit HTML Site |
Example
<head>
<style>
a.link{color:red;}
a.visited{color:green;}
a.hover{color:blue;}
a.active{color:purple;}
</style>
</head>
<body>
<p class="link1" href="#" >
Click Here
</pl>
</body>
<style>
a.link{color:red;}
a.visited{color:green;}
a.hover{color:blue;}
a.active{color:purple;}
</style>
</head>
<body>
<p class="link1" href="#" >
Click Here
</pl>
</body>
Displays
Click hereThe above link colour is red but if you do the following the link colour will change:
- If you hover your mouse on the 'Click Here' it will change to blue.
- If you press the mouse down on the 'Click Here' the link colour will change to purple.
- If you click on the 'Click Here' it will take you to the top of the page and the colour will change to green.
Styles
If you have several links, on the same web page, to different sites you might want to style the links differently. For example, on this web page the exercises and content links have different styles.
Have a look at the examples below on how you can use the class selector to style your links diffrently.
Example 1
<head>
<style>
.anc a:link{color:#BB0101;font-size:20px;}
.anc a:visited{color:#000080;font-size:20px;}
.anc a:hover{color:#008000;font-size:20px;}
.anc a:active{color:#111111; font-size:20px;}
</style>
</head>
<body>
<div id="lk">
<a href="#">Home</a>
<a href="#">HTML</a>
<a href="#">CSS</a>
</body>
<style>
.anc a:link{color:#BB0101;font-size:20px;}
.anc a:visited{color:#000080;font-size:20px;}
.anc a:hover{color:#008000;font-size:20px;}
.anc a:active{color:#111111; font-size:20px;}
</style>
</head>
<body>
<div id="lk">
<a href="#">Home</a>
<a href="#">HTML</a>
<a href="#">CSS</a>
</body>
Example 2
<head>
<style>
.sty1 a
{background-color:blue;color:white;padding:5px;}
.sty1 a:hover
{background-color:red;padding:5px;}
</style>
</head>
<body>
<div class="sty1">
<a href="#">Exercise 1</a>
<a href="#">Exercise 2L</a>
</body>
<style>
.sty1 a
{background-color:blue;color:white;padding:5px;}
.sty1 a:hover
{background-color:red;padding:5px;}
</style>
</head>
<body>
<div class="sty1">
<a href="#">Exercise 1</a>
<a href="#">Exercise 2L</a>
</body>
Displays