Style Precedence
Question: I'm having trouble with changing the colour of links on pages controlled by stylesheets. Is there a good reference for the order that styles are applied? If I put a style="color:green;" on an anchor tag, for example, the color from the main external stylesheet still overrides it. What has precedence, and how can you cancel that precedence?
Cliff
Answer: The order of precedence is as follows:
- User styles take precendence over author styles (that's how browsers treat it but the specification says the other way around)
- class or id styles take precedence over general styles.
- Styles marked !important take precedence over styles not so marked.
- The closest defined style that applies takes precedence over those defined earlier in the page.
The one tag where it is very difficult to assign the style to the tag itself is the anchor tag because you need separate definitions for a:link, a:active, a:hover, and a:visited. The easiest way to set up a colour definition for an anchor tag is to define a class eg:
<style>
a.green:link, a.green:visited, a.green:hover, a.green:active {color:green;}
</style>
<a class="green" ... >
