CSS Basics: Styling Links

Last week I explained about linking pages using the anchor tag. This week is about styling those links. For the basics of styling read my previous post Understanding CSS.

Target the anchor tag

In our CSS we can simply target the anchor tag using the a as the selector. So if we wanted our links to always be green and bold we could use

a {
    color: green;
    font-weight: bold;
}

If you wanted to have links in a div with the id of topmenu to be white (because perhaps the topmenu has a black background) but all other links to be in blue then we could have

a {
    color: blue;
}

#topmenu a {
    color: white;
}

Notice here, the first ruleset uses just a as the selector. This means all anchor links. However, the second ruleset uses #topmenu a as the selector, and this means all anchor links enclosed in the element with an id of topmenu i.e.

<div id="topmenu">
   <a href="/">Home</a> | <a href="about.htm">About</a> | <a href="contact.htm">Contact</a>
</div>

By putting the ‘#topmenu a’ ruleset second you automatically override the properties in the first ruleset with the second ruleset’s property values. This means that the colour is set in the first ruleset and the second ruleset overrides the colour for that particular selector. However, if you set perhaps the font weight to be bold in the first ruleset, if you didn’t specify anything for the font weight in the second ruleset then it would inherit the font weight setting from the first ruleset.

So to recap:

• Single tag selectors apply to every instance of that tag on a page eg. a, p, h1, div
• You can override some or all properties by specifying a second (anywhere later in the file), more targeted selector eg. #idname a, #content p
• Any properties not specified in the second ruleset will automatically be inherited from any rulesets already applied to that tag.

If, for example, you had a top menu with a black background colour and a side menu with a blue background colour, and you wanted white links in the top menu, yellow links in the side menu, and blue links everywhere else, but you wanted bold links for the side menu and the page links then you would use

a {
    color: blue;
    font-weight: bold;
}

#topmenu a {
    color: white;
    font-weight: normal;
}

#sidemenu a {
    color: yellow;
}

As you can see here, the topmenu links have had both their colour and font weight over written, whereas the sidemenu just has the colour changed. Both the topmenu and the sidemenu will only inherit their rules from the first ruleset for the anchor tag. The sidemenu ruleset will not inherit anything from the topmenu ruleset as they are unrelated, so the order of these two rulesets has no bearing on the outcome.

Styling Link States

With page links we can go one step further and style the different states for a hyperlink. A hyperlink typically has 5 states which we target using pseudo-classes:

:link

The state for a link that has not yet been visited

:visited

The state of a visited link

:hover

The state of a link when the mouse is hovering over it

:active

The state of a link when it is being clicked

:focus

The state of a link when it is selected but hasn’t been clicked (this is unsupported in current versions of Internet Explorer)

These pseudo-classes are not just limited to the anchor tag in browsers that support them (such as Internet Explorer 7, Firefox and Opera).

So now we can specify what colour link to use before and after the link has been visited, and we can also have the link change to a third, different colour, when someone hovers their mouse over it. So, for example, we could have all links, in all states, in bold, and then we’d have non visited, visited and hover states in blue, purple and red respectively. To do this we’d use

a {
    font-weight: bold;
}
a:link {
    color: blue;
}
a:visited {
    color: purple;
}
a:hover {
    color: red;
}

Another common property with links is the text-decoration which is used to control whether a link is underlined or not. Often you’ll see sites with non underlined links until you hover over them. To achieve this we can use the following:

a {
    font-weight: bold;
    text-decoration: none;
}
a:link {
    color: blue;
}
a:visited {
    color: purple;
}
a:hover {
    color: red;
    text-decoration: underline;
}

The other values that the text-decoration property can have besides none and underline are overline, line-through, blink and inherit (although I wouldn’t ever recommend using blink as it’s just distracting).

You can set other properties on links such as a background colour, font size, font family and more. Next week I’ll explain more of these properties and how they can be used.