By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

CSS Links

There are nothing called a CSS link, but you can style your HTML links with CSS.

Created: 2012-10-07 05:24

There are not really anything called CSS Links, but you can style your links with CSS. Do not let yourselves get confused about the wording on different Tutorial sites – they are often choosing the wrong wording on purpose, just to catch the searchers who would type in wrong tings in the search engines.

Links can be styled with the CSS pseudo-classes, you can read more about those in Brugbarts reference:

  1. :link
  2. :visited
  3. :hover
  4. :active

CSS Links

When people talk about CSS Links, what they likely mean is normal HTML links that has been changed with CSS. One of the most popular changes you can make to HTML links with CSS is the addition of hover effects – normally links will just hold a standard blue color in browsers – this, and more can be changed with css.

To change the standard blue color on links and add a hover effect, one only needs to use the below piece of CSS code:

a:link { color: yellow; }
a:hover { color: red; }

The :link selector used above, will change the color of all unvisited links on a page to yellow. You can also change the color of unvisited links, this should be done with the :visited selector.

a:visited { color: purple; }

The :active class does not do what you would think, but rather it applies to links while they are being clicked – that would be while the user is holding down their mouse button. This behavior depends on the browser. For real active link styling, it is recommended to use either JavaScript or server-side programming.

The Ordering of the Declarations

The order of the declarations can also be important – for example, placing :link after :hover will overrule the styles set by :hover, making them never become active. The recommended order is therefor as follows:

a:link {}
a:visited {}
a:hover {}
a:active {}

This behavior is not as you would expect, but it is nevertheless not a bug in your browser.