I've provided a basic tutorial on creating multiple link styles in another tutorial.
But even with such tutorials, some people have a hard time "getting it." This is largely because they are so keyed upon links that they haven't grasped the fundamental underlying concepts.
Think about the terminology: Cascading Style Sheets. "Cascading" has the idea of things devolving from one place to another. Put another way for our purposes, it means that styles go from broad to specific. To get "specifIC" you have to specifY. And the more specific rule "overrides" the less specific.
In terms of the cascade, various things come into play for determining whether a rule is more specific. Natively, certain tags are more specific than others. For example, if you specify a colour on the body tag:
body {
color: #777777;
}
... that colour (in this case, a rather light gray) is going to be the default colour of all your text.
But if you specify a colour on your <p> tag, any text within the <p> tag is going to override the body colour and go with the <p> colour.
<a> tags override all other default tag rules for colour and text-decoration. (By default, most browsers will give blue text with underline.) The browser default for a link is more specific than any rule you give to regular text. No matter what colour you specify for the non-linked text, it is not going to affect the link colour, even if you are using something so specific as an ID tag. You need to explicitly set a link style.
The most basic code for this would be:
a {
/*styles here*/
}
The above comments regarding the browser default being more specific than any rules for regular text explains why doing this:
.mylink {
/*styles here*/
}
... won't affect a link. You have to apply the style to the link tag:
.mylink a {
/*styles here*/
}
or
a.mylink {
/*styles here*/
}
Now, all other things being equal (meaning: if this isn't overridden by still more specific rules), all links in a container with the .mylink class will have those styles.
Other things which affect specificity include code ordering (later rules will override earlier ones of the same level of specificity) and a progression from tag > class > ID. More specific yet are various combinations of these.
To illustrate:
a {
color: #000000;
}
/* ... later in the CSS: */
a {
color: red;
}
What colour are your links all going to be? Red. The #000000 (black) style is now doing absolutely nothing, because you've overridden it later in the code.
How about this:
a {
color: red;
}
.mylink a {
color: blue;
}
#thislink a {
color: green;
}
Now what will happen?
Well, any links on the page that are not in either a .mylink element or the (single) #thislink element are going to be rendered red.
The links contained within .mylink elements will be rendered blue.
The links contained within the #thislink element will be rendered green.
But what if you have a .mylink element inside the #thislink element? Will its links render blue, or green? Green, because #thislink is more specific than .mylink.
But what if you want all .mylink links to render as blue, even if they are inside #thislink? Well, then you need to override #thislink's specificity:
#thislink .mylink a {
color: blue;
}
Because #thislink .mylink a is more specific than #thislink a, the links will now be rendered blue instead of green. (Note: writing it .mylink #thislink would not work. Think of the order of the code going from "big" to "small" - #thislink contains .mylink, which in turn contains the "a" tag.)
Where you specify styles also affects the cascade. We've already noted that in a given style sheet, later rules with the same selectors override earlier ones. But note, as well, that you have several options regarding where such styles are written: in an external style sheet; in the page head; and inline in the HTML. Each of these are successively more specific. Inline is considered "later" than code in the page head; code in the page head is considered "later" than code in an external style sheet (actually, we'll qualify that in a moment).
Thus, a style in an external style sheet will be overridden by a style for the same tag or other selector which is specified in the page head. (In truth, this statement is assuming that the page head style sheet follows the link to your external style sheet in your head code, as it should. If your style sheet in the page head precedes the link to your external style sheet, the external sheet will override your page head rules - see this example. This actually follows the pattern: the link is later than the head style, so the linked CSS overrides the page head CSS.)
And so likewise, a style in the page head will be overridden by an inline style.
To make this concrete, let's say you have this in your external style sheet:
.mybox {
border: 1px solid #777;
padding: 3px;
}
Now, an element (let's say a div) in your HTML which has the .mybox class applied to it will have a light gray 1px solid border, and a 3px padding.
But let's say that, below your link to your external style sheet, you add this to the head of your HTML page:
<style type="text/css">
<!--
.mybox {
border: 3px inset #777;
}
-->
</style>
Although you haven't deleted your original style sheet in the external CSS file, the same div will now have a 3px inset border instead of a 1px solid one. (However - it will still have 3px padding, because you have not overridden the initial style.)
Let's keep those, and go a step further. In your HTML, you have:
<div class="mybox" style="border:5px ridge red; padding: 5px">
Now all the original styles will be overridden. There will be no sign of the original border and padding; instead, you will have a 5px red ridged border around your div, and it will have 5px padding. All other things being equal, later styles override earlier ones.
Here's a couple words of advice for coding links (principles here will apply beyond links, as well).
Any time you want to specify a "set" of links, remember the issue of source order. 99 times out of 100, the source order you want for the major link states is link, visited, hover, active. (You can also specify focus as a link state.)
The simple "link" state refers to what a link looks like just sitting on the page. If you place this tag after visited, it will override your visited style; ditto hover etc. Similarly, if you placed your visited styles after your hover styles, the hover styles would no longer work after the user had visited that page.
So if you want to specify all four states, you can do this:
a:link {
/*styles*/
}
a:visited {
/*styles*/
}
a:hover {
/*styles*/
}
a:active {
/*styles*/
}
Note: If you only want to have two styles - one for hover and active, and one for everything else, you can simply do this:
a {
/*styles*/
}
a:hover, a:active {
/*styles*/
}
Go from most general to specific in the order of your CSS code. Theoretically, a more general style should not override a more specific style no matter where they are, but it's safest to have the most specific styles later in the code to avoid unwanted overrides.
Thus your style sheet might be ordered following a format something like this:
As I indicated, understanding links is a subset of understanding the whole issue of the cascade itself, which provides the foundation for everything you do in CSS. In your reading, don't skim things that are talking about classes and IDs on the rationale that "they aren't about links." You would be absolutely wrong. You won't understand how links work if you don't understand how the cascade works.
Get the cascade in your head, and you will be able to troubleshoot your difficulties with links.
Related tutorials:
Creating and Applying CSS Rules
Click on the monitor for more info about a site.