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,
a:link {
color: #000000;
text-decoration: none;
}
a:visited { color: #CCCCCC; }
a:visited:hover,
a:hover { color: #CC0000; }
a:active { color: #FF0000; }
Great tip, Dave. I was aware of this, but wonder if you can shed some light on why the order needs to be so?
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.
Pingback: CSS TIP: ORDEM DE DECLARAÇÃO DOS LINKS » Pinceladas da Web - Reflexões sobre XHTML, CSS, PHP e WebStandards
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!
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.