CSS Link Tutorials

CSS allows you to add styles to your links using the anchor selector (a) in a CSS rule. You can apply any CSS property to links, for example: color, background, margin, padding, etc.

Anchor Pseudo-classes

The CSS rule below show you how to add styles to your links using only the anchor (a) selector.

a { color:red; text-decoration:underline; }

Pseudo-classes are used to represent a change in state of an HTML element within an HTML document. Some examples of states are when a user has clicked on a text link or when a user hovers over an element. Pseudo-classes allow you to control how the element should appear when an element is in or under a certain state.

Link States

There are 4 states that links can be in. The CSS rule above will style all 4 link states. Pseudo-classes allow you to apply styles to links depending on what state the link is in. CSS allows you to apply styles to links depending on which one of the four states the link is in.

You can specify all 4 states of links in a stylesheet by specifying only the selector "a", which applies to anchor tags or you add style to links that are in or under a certain state by applying pseudo-classes to the a selector.

The 4 states that a link can be in is listed below.

a:link a link that has not been clicked on by the user
a:visited a link that has clicked on by the user
a:hover a link that the mouse is hovering over
a:active a link that is being clicked on

When you use pseudo-classes to set the style for link states, the rules below apply.

  • The pseudo-class a:hover must come after the pseudo-classes a:link and a:visited
  • The pseudo-class a:active must come after the pseudo-class a:hover

The CSS rules below show you how to apply styles to links using pseudo-classes.

a:link { color:red; text-decoration:underline; } a:visited { color:blue; text-decoration:underline; } a:hover { color:red; text-decoration:none; } a:active { color:red; background:yellow; text-decoration:none; }

Combining Anchor Pseudo-Classes and CSS Classes

Pseudo-classes can be combined with CSS classes.

The CSS rule below shows you how to combine pseudo-classes with CSS classes.

a.red { color:red; }

The CSS rule above applied to the HTML code below produces a text link with a color of red.

<a href="http://learnwebsitedesign.com/" class="red">text link</a>