Styling Links
Links can be style with any CSS property (e.g. color, font-family, background-color).
Special for links are that they can be styled differently depending on what state they are in.
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 call up this property, you use the pseudo-class(click on the link to learn more on pseudo-class).
The four links states are:
- a:link – a normal, unvisited link
- a:visited – a link the user has visited
- a:hover – a link when the user mouses over it
- a:active – a link the moment it is clicked
What is a Pseudo-Class
A pseudo-class allows you to take into account different conditions or events when defining a property for an HTML tag.
As you already know, links are specified in HTML tags as <a>, in CSS the selector for a link is “a”
using any of the four states above, we can specify what kind of effect a link has.
color: green;
}
Now a link can have different states, it can be visited or unvisited, depending on the event that is actually happening, a pseudo-class is used to individually style those events that can occur. let’s see an example
color: blue;
}
a:visited {
color: indigo;
}
When setting the style for several link states, there are some order rules:
- a:hover MUST come after a:link and a:visited
- a:active MUST come after a:hover
Example 1:
Let’s see an example on using the four states at a go and style our HTML document.
<html>
<head>
<style type="text/css">
a:link {
color: blue;
}
a:visited {
color: indigo;
}
a:hover {
color: red;
}
a:active {
color: violet;
}
</style>
</head>
<body>
This is a link to <a href="http://www.google.com">Google</a>
This is a link to <a href="http://www.yahoo.com">Yahoo</a>
</body>
</html>
it will look like this on your browser
Example 2: Styling Links with Text and Font Effects
You already have knowledge about using text and font in CSS to style your HTML document, but did you know, that you can combine those properties in your link property to make it have a nice effect on your web page?
Let try out some examples using some text & font properties such as :
- letter-spacing
- text-transform
- font-weight
- font-style
<html>
<head>
<style type="text/css">
a:link {
color: blue;
letter-spacing: 2px;
}
a:visited {
color: indigo;
font-style: oblique;
}
a:hover {
color: red;
text-transform: uppercase;
}
a:active {
color: violet;
font-weight: bold;
}
</style>
</head>
<body>
This is a link to <a href="http://www.google.com">Google</a>
This is a link to <a href="http://www.yahoo.com">Yahoo</a>
</body>
</html>
it will look like this on your browser
Example 3: Removing the Underline on a Link and Adding background Color
Once a link is created, by default your browser tends to render an underline effect on the link whether is active, visited or hover. to work around this, you can use the text-decoration property to get rid of the underline and make it the way you want it. let’s try it out.
<html>
<head>
<style type="text/css">
a:link {
color: blue;
letter-spacing: 2px;
text-decoration: none;
}
a:visited {
color: indigo;
font-style: oblique;
text-decoration: none;
}
a:hover {
color: red;
text-transform: uppercase;
text-decoration: none;
}
a:active {
color: violet;
font-weight: bold;
text-decoration: none;
}
</style>
</head>
<body>
This is a link to <a href="http://www.google.com">Google</a>
This is a link to <a href="http://www.yahoo.com">Yahoo</a>
</body>
</html>
it will look like this on your browser
To Add a background effect to your links, you can use the background-color property, to add a nice effect on your links. let’s see an example.
<html>
<head>
<style type="text/css">
a:link {
color: blue;
letter-spacing: 2px;
text-decoration: none;
}
a:visited {
color: indigo;
font-style: oblique;
text-decoration: none;
}
a:hover {
color: red;
text-transform: uppercase;
text-decoration: none;
background-color: #c0c0c0;
}
a:active {
color: violet;
font-weight: bold;
text-decoration: none;
}
</style>
</head>
<body>
This is a link to <a href="http://www.google.com">Google</a>
This is a link to <a href="http://www.yahoo.com">Yahoo</a>
</body>
</html>
it will look like this on your browser
How did all this work out for you, practice some more, and try some new stuffs on your own, try working with link using other texts and fonts properties to make your web page awesome.
| Back | Main: CSS Programming | Previous Lesson: Fonts | Next Lesson: IDs & Classes |
