Styling Links in CSS
Lessons Covered


Back in the the HTML tutorials links were created. The anchor tag and the overall format of a link was discussed.

Links can also be styled in CSS. You can change the color of a link and even remove the default underline found underneath a link. Much of the formatting you learnt previously can also be applied when styling your links in CSS.


A link has a specific format. That format is: 

a: [condition] <----- The condition refers to the state of the link


The possible conditions are link ( refers to a normal link ), visited ( refers to a visited link ), hover ( link when the mouse is over it ) and finally active ( state when the link is clicked by the user ).


A link that has not been visited. This is the link as it appears normally. Normal links appear blue and underlined. Below the color of the link is changed to green and the default line usually found beneath the link removed. 

a:link
{
color: green;
text-decoration: none;
}

arrow  Click to see result


a:visited

A link that has been visited. When you click a link the state of that link changes from a:link ( normal ) to a:visited ( visited ). In this example the color is set to change to purple and the text that makes up the link to italics. This change will be noted if you observe the link you had just clicked again.

a:visited
{
color: purple;
font-style: italic;
}

arrow  Click to see result

Note: Remember that most CSS properties can be applied to your link. In this example we only apply the color and font style properties.


a:hover

Movement of the mouse over a link. When the user hovers over a link any formatting specified by a:hover will be be reflected. In this example we set the font weight to be bold. 

a:hover
{
font-weight: bold;
}

arrow  Click to see result


a:active

A link just when it has been clicked. Below, the color and font-variant properties are applied. 

a:active
{
color: #000000;
font-variant: small-caps;
}

arrow  Click to see result


Bringing the formatting together

An important thing to remember about links is that there is a layout that should be adhered to. When making the specifications in a style sheet it is important to follow the layout. The rules are like this:

  • The a:hover has to come after a:link
  • The a:hover must also come after a:visited
  • The a:active has to come after a:hover.


A properly defined layout is created below using all the formatting above:

style.css

a:link
{
color: green;
text-decoration: none;
}

a:visited
{
color: purple;
font-style: italic;
}

a:hover
{
font-weight: bold;
}

a:active
{
color: #000000;
font-variant: small-caps;
}

arrow  Click to see final result


    Previous Lesson Previous Lesson - Backgrounds                            Next Lesson - The Box Model Next Lesson