Dave Woods - Freelance Web Design Warwickshire

Quick tip: CSS link ordering

From time to time I’ll come across a little tip or something useful that web designers should know or have easy reference to. When I’ve come across these bits of information in the past, I’ve usually added them to my browser bookmarks only to find that they become lost in a sea of favourites.However, so that these bits of information don’t get lost, I’m going to add them to my blog so that they’re much easier to reference.

To start this new feature, I’ll start off with CSS links. A lot of people may not be aware of this but it’s extremely important as to what order these appear in your stylesheet so that all the styles are applied.

Therefore links should be applied in the following order:

a:link {
color: #000000;
text-decoration: none;
a:visited { color: #CCCCCC; }
a:hover { color: #CC0000; }
a:active { color: #FF0000; }

5 comments on “Quick tip: CSS link ordering

  1. Dave Post author

    The order should be like this due to link specificity. For example, moving the a, or a:link to the end of the CSS would stop the active and visited from working due to them being superseded by the a and a:link styles.

    Using CSS in this correct order will ensure that all the styles applied to each state will be rendered correctly.

  2. Pingback: CSS TIP: ORDEM DE DECLARAÇÃO DOS LINKS » Pinceladas da Web - Reflexões sobre XHTML, CSS, PHP e WebStandards

  3. John Porter

    I found that even if you want to apply the same styles to two of the link types (i.e. a:link, a:hover), it is still better to do them all separately and not use the comma separator. Some browsers can mash this up and your styles will not be effective.

    Good piece of advice, I will also emphasize this with you…

    This is not a tip, it is a must!

  4. Dave Post author

    John, that’s true if you’re going to change the order but if you want to combine the styles and keep them in the same order then you shouldn’t have any problems using the comma as far as I’m aware.

    I would usually declare them all separately though apart from the a, a:link values.