XHTML and CSS - Styling Links
Styling Links
In this tutorial we're going to be going over styling links, a link is a lot more complicated then you might think. A link is composed of something called states, a state is basically how and when you press a link. There's one state for when a link is first visited, there's another state for when the link has been clicked, there's another state for when your mouse is over the link and the last state is when your mouse button is down as your clicking the link, so one link can have 4 different styles. So let's change the styling on each different state of a link, first we'll need a page with a link and some normal text so we can see the difference.
<html> <head> <title> This is the title. </title> <style type="text/css"> </style> </head> <body> <a href="https://aboredcoder.com/" alt="A Bored Coder">ABoredCoder</a> This is plane text. </body> </html>
Before you click a link it's in it's default state and the property for that is a:link, so let's change the color to red and the text decoration on the default state of a link. You can change the text decoration width the text-decoration property. With the text-decoration property you can set it to have the text underlined, line-through or none, I'm just going to set it to none in this tutorial.
<html> <head> <title> This is the title. </title> <style type="text/css"> a:link { color: red; text-decoration: none; } </style> </head> <body> <a href="https://aboredcoder.com/" alt="A Bored Coder">ABoredCoder</a> This is plane text. </body> </html>
The next state we'll be looking at is the visited state, the property is a:visited and this is for links you have already visited. I'm just going to change the color to green.
<html> <head> <title> This is the title. </title> <style type="text/css"> a:link { color: red; text-decoration: none; } a:visited { color: green; } </style> </head> <body> <a href="https://aboredcoder.com/" alt="A Bored Coder">ABoredCoder</a> This is plane text. </body> </html>
The next state we're going to look at is the state for when you hover over a link, the property for this is a:hover, for this I'm going to change the background color to red and the text color to white so you can see when this state is active.
<html> <head> <title> This is the title. </title> <style type="text/css"> a:link { color: red; text-decoration: none; } a:visited { color: green; } a:hover { color: white; background-color: red; } </style> </head> <body> <a href="https://aboredcoder.com/" alt="A Bored Coder">ABoredCoder</a> This is plane text. </body> </html>
The next and last state we're going to be looking at is the active state, the active state is active as you're pressing down on the link. The property for the active state is a:active. I'm going to be changing the background color to white and the text color to red to make this state stand out.
<html> <head> <title> This is the title. </title> <style type="text/css"> a:link { color: red; text-decoration: none; } a:visited { color: green; } a:hover { color: white; background-color: red; } a:hover { color: red; background-color: black; } </style> </head> <body> <a href="https://aboredcoder.com/" alt="A Bored Coder">ABoredCoder</a> This is plane text. </body> </html>
Now when you view this page you'll see that if you've visited the link it'll now be green, when you hover over the link the background will change to red and the text color will change to white and as you click the link the background will change to black and the text color will change to red.

Page generated in 0.0046 seconds.