Closed (sort of)
TEOM as you know it has been closed. I will keep it up for reference but it no longer will receive tutorial updates.
There are plans for a completely new site. If you'd like to be notified once the other site is up, simply subscribe to my mailing list.
Thanks for the support throughout all these years :)
XHTML + CSS
Separate Link Styles
Updated on January 01, 2006.
In this tutorial I’ll be showing 3 methods for using different link styles on the same page. Both methods use CSS.
Method #1: Classes
This is what I would call the “traditional” (and old) method. It could still be used depending on what type of site you want to create, although I’m not a big fan of it and I try my best to avoid it.
Set a different class for each of your link styles.
On the HTML file, all you have to do is add the class information to your links.
Method #2: ‹a› tag within DIV
TEOM uses this method and, I must say, I love it. Not only because the files (both CSS and HTML) are smaller, but because there’s less text to add/edit when coding manually.
Here’s how TEOM’s CSS file is setup:
This means that all links within a specific DIV will have the same style, without having to add any extra info to the HTML file.
Since you’ve defined a global style for the ‹a› tag, there’s no reason to use :link, :hover, :active nor :visited unless you want them to be different.
Method #3: different ids
What if you want to have a different link style on the same div? Or what if you want to create a page without using the ‹div› tag?
The answer is to set different ids.
Here’s a very simple example of an id:
Same structure used for a ‹div› tag.
And here’s the code for the link to work using the defined id:
Note: when working with ids, it is recommended that you only use each one once in a page.
· Mar 25, 2005 ·