Skip to main content

A Beginner's Guide to CSS | Part Nine - CSS and Links

Submitted by helen on Wednesday, June 9, 2010 - 22:10; Modified on Thursday, August 18, 2016 - 11:12

Welcome to the A Beginner's Guide to CSS series, Part Nine CSS and Links. In this instalment, we will be discussing how to style links with CSS.

The a element

Links (or hyperlinks) are represented by the a element (also referred to as the anchor tag or anchor element). The anchor element can be styled using the type selector, as follows:


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

(X)HTML Code:


<a href="#">Click me!</a>

Result:

Click me!

No matter how you interact with this link, it remains green and bold. While that's all very well, it's not particularly useful. Ideally, you want your links to aid the way your users interact with your website, not remain the same, no matter what a user does.

The pseudo-classes

There are four states to a hyperlink, which can be styled using CSS. They are as follows:

:link
the state of the link before it has been visited.
:visited
the state of the link after it has been visited.
:active
the state of the link when it has been clicked but the mouse button has not been released.
:hover
the state of the link when the mouse moves over it.

The above are called pseudo-classes. All you really need to know about pseudo-classes is that they provide more of a fine-grained selection process ... they give you more control over what you can select; pseudo-classes also enable extra functionality not contained within the document tree ... but you don't need to worry about this, just yet.

How to style the a element

Example of using pseudo-classes to style the four hyperlink states

CSS Code:


a:link {
  color:cyan;
}

a:vsited {
  color:magenta;
}
			
a:active {
  color:blue;
}

a:hover {
  color:black;
}

(X)HTML Code:


<a href="#">Click me!</a>

Result:

Click me!

This link reacts when you interact with it. How cool is that :)?

What properties can I add to my hyperlinks?

In the last instalment, titled A Beginner's Guide to CSS | Part Eight - CSS Font and Text Properties, we covered many of the properties you will likely use on your links; these are listed below, as well as a new property — text-decoration, which can create a line underneath, above or through a link (as well as make a link blink in and out, which, in all honestly, is really annoying). There are a several other properties that come in handy when styling links, but these are beyond the scope of this tutorial as they involve more complex CSS (not to worry, we will cover them later).

color
change the colour of a link
font
a shorthand property to change various font properties all at once
font-family
specify a font family for a link
font-size
set the font size of a link
font-style
make a link italic and turn it back to normal
font-weight
make a link bold and turn it back to normal
text-transform
change the case of a link
text-decoration
add a line above, under or through a link

Introducing text-decoration

The text-decoration property has six values:

blink
makes a link blink in and out; this can be annoying and should be avoided.
inherit
sets the text decoration to whatever it is set to on the parent element, or an ancestor element. This doesn't work in versions of IE below 8.
line-through
adds a line through the link.
none
removes any "decoration" from the link, so it will not blink, nor will it have a line above it, underneath it or through it.
underline
adds a line underneath the link.
overline
adds a line over the link.

CSS Code:


/* This link blinks */
a {
  text-decoration:blink;
}

/* This link has a line through it */
a {
  text-decoration:line-through;
}

/* This link has no decoration */
a {
  text-decoration:none;
}

/* This link is underlined */
a {
  text-decoration:underline;
}

/* This link has a link above it */
a {
  text-decoration:overline;
}

(X)HTML Code:


<a href="#" title="Isn't it annoying?">This text blinks.</a>
<a href="#" title="This looks cancelled out...">This link has a line through it.</a>
<a href="#" title="Nothing at all!">This text has no text decoration applied to it.</a>
<a href="#" title="Default link style">This link is underlined; underline is generally regarded as the default text decoration.</a>
<a href="#" title="This looks weird">This link has a line over it.<a/>

Result:

This text blinks.

This link has a line through it.

This text has no text decoration applied to it.

This link is underlined; underline is generally regarded as the default text decoration.

This link has a line over it.

Note — in this example we are not using inherit, because there is nothing to inherit from.

An alternative way to style links

While it's useful to distinguish between links a user has and hasn't visited and provide hover functionality, you may not want to go overboard with the pseudo-classes. What you may quite frequently see is web designers adding styles to the a element and then creating additional styles, using the pseudo-classes. For instance, when I write CSS, I will normally specify styles for the a and then modify these styles for the :hover and :visited states (and sometimes the :active state) to enhance the user's interaction and help them see which pages they've already visited.

Example

CSS Code:


a {
  color:#F3C;
  font-style:italic;
  font-size:130%;
}

a:hover {
  color:#FF6;
}

a:visited { 
  color:#69C;
}

HTML Example:


<a href="#">I take up fewer lines of code :)</a>

Result:

I take up fewer lines of code :)

In depth styling of links

Applying a class to a link

To apply a class to a link, you apply a class to your element using the HTML class attribute, and target that class using the CSS class selector.

CSS Code:


a.classExample {
  color:#C3F;
  text-transform:uppercase;
}

(X)HTML Code:


<a href="#" class="classExample">I am uppercase and magenta!<a>

Result:

I am uppercase and magenta!

Applying styles to links via the ID selector

If an element has an ID, it may be preferential to style that element up using the ID selector. The ID selector takes the form of a hash, followed by the ID of the element.

CSS Code:


a#IDExample {
  color:#669;
  font-weight:bold;
}

(X)HTML Code:


<a href="#" class="IDExample">I am bold and purple!<a>

Result:

I am bold and purple!

Link titles

This isn't strictly CSS, but something you'll want to abide by. Whenever you create a link, remember to give it a title. Titles are important for accessibility, search engine optimisation, and to give your visitors an idea of what is to come when they click on a link.

Titles are applied to a link via the title attribute, as seen below.

How to apply a title to a link

(X)HTML Code:


<a href="https://portal.robertson-cgg.com/" title="Visit the GeoVerse Portal (the application I'm currently developing at work)">Visit the GeoVerse Portal (the application I'm currently developing at work).<a>

Result:

Visit the GeoVerse Portal (the application I'm currently developing at work).

A note on overriding link styles

You may encounter this issue a lot, when styling links, so I have addressed it here; luckily it's easy to resolve. When styling links, if you create a style for a link based off its class or ID, for example, (as we've done above) and you've already got styles applied to your a element, you will notice some of the styles already on the a element will appear on your new links. This is because CSS cascades. Styles applied to an element will seep down the hierarchical chain to other instances of that element. The way to get around this is to hunt down the properties you don't want visible and cancel them out, as seen below. If you're unclear about how the position of CSS elements within a stylesheet can affect their rendering, please see A Beginner's Guide to CSS | Part Four - The CSS Order of Precedence.

Example on cancelling out undesirable link styles

CSS Code:


a.existingStyles {
  font-weight:bold;
  text-decoration:underline;
  color:purple;
}

a.overrideStyles {
  font-weight:normal;
  text-decoration:none;
  color:orange;
  font-size:140%;
}

HTML Example:


<a href="#" class="existingStyles">I am the Almighty A Element. Tremble at my feet!<a>
<a href="#" class="overrideStyles">I cancel out the styles on The Almighty A Element. Mwahaha!<a>

Result:

I am the Almighty A Element. Tremble at my feet!

I cancel out the styles on The Almighty A Element. Mwahaha!

Issues you're likely to encounter

If you're placing a class or an ID on a link using shorthand, and at the same time, need to create a hover and visited state, you will notice that the styles for the pseudo-classes will not be displayed. This is because the a element covers all of the link states, and thus will override anything you try to place on them. The only way to get round this is to use the CSS !important keyword. Let's see how we do that.

CSS Code:


a.override {
  color:#C33; 
  font-size:120%;
}

a.override:hover {
  color:#C9F !important;
  text-decoration:none;
}

a.override:visited {
  color:#36C!important;
}

(X)HTML Code:


<a href="#" class="override">I am shorthand, yet my pseudo-classes work!</a>

Result:

I am shorthand, yet my pseudo-classes work!