Adult Webmaster World Tutorials - Photoshop, Traffic, Site Building, Design!

CSS Link Color Tutorial

Multiple Link Colors With CSS
by Greg Mansfield

Software Used: Notepad (or any HTML editor)
Skill Level (out of 5):

Intermediate

I like to spend a couple of hours a day reading through industry news and networking with other designers or webmasters to generate ideas within the business. Not only can I find out the latest scoop on important industry issues, I can also look at what questions most people have pertaining to specific developer programs and languages. While I was browsing the boards today, an interesting question arose regarding the possibility of having more than one set of colors for links within HTML. The only viable option that we can use to implement this is through the application of pseudo-classes in CSS (Cascading Style Sheets).

I've been using CSS for almost as long as I've been designing. It's great for the simple reason that it grants the author and reader more control over the viewing of a site. When I first started using it, I thought CSS only allowed text to be a fixed size, style and color; soon I was using it to add color to my forms and scrollbars. Today I realize that CSS can be used to make a site look good at any resolution with relative positioning, or it can cut down the file-size of a block of formatted HTML by a third and so very much more. But you wanted to know about having more than one text-link color, didn't you...

N.B. This tutorial is written with the assumption that you know the bare basics of CSS & HTML.

1. Start by making a blank html page and opening it within your editor. Add a title and make the background color white to begin with:

2. Add the CSS into the head of the HTML which will tell the browser what colors the links will be in their various states. I've opted for the default blue, red and purple colors you find on most sites:

<title>CSS Test</title>
<style>
  a.link { color:#0000FF }
  a.active { color:#FF0000 }
  a.visited { color:#660099 }
  a.hover { color:#FF0000 }
</style>
<body bgcolor="#FFFFFF">

This will make all the links appear blue within the browser. When the link is active or the cursor is over it, the color will change to red. Visited links will appear purple. However, this applies to all links on this page. Anything from a text link to an image with a border. So now we need to make two separate sets of colors.

3. Add a small name to your first set of text links. This name needs to be inserted within each style, between the 'a.' and the link-state. I opted for the name 'text1' for simplicity:

<title>CSS Test</title>
<style>
  a.text1:link { color:#0000FF }
  a.text1:active { color:#FF0000 }
  a.text1:visited { color:#660099 }
  a.text1:hover { color:#FF0000 }
</style>
<body bgcolor="#FFFFFF">

4. Now make a second set of link colors with a different name. I chose 'text2' to have the colors green, orange and light blue.

<title>CSS Test</title>
<style>
  a.text1:link { color:#0000FF }
  a.text1:active { color:#FF0000 }
  a.text1:visited { color:#660099 }
  a.text1:hover { color:#FF0000 }

  a.text2:link { color:#00FF00 }
  a.text2:active { color:#FFCC00 }
  a.text2:visited { color:#00CCFF }
  a.text2:hover { color:#FFCC00 }
</style>
<body bgcolor="#FFFFFF">

Notice the blank line I inserted between the two sets of colors. This is so it's easy to see where one set stops and another starts; browsers won't take notice of white space when loading the HTML.

5. Now it's as simple as adding in your text links and applying a class for each one. Within the body of your HTML insert two lines of text for your links. Link each one to anything you please as shown below:

6. Add the appropriate style to each link, the blue text link goes with 'text1' and green uses 'text2'. Do this by inserting the 'class' attribute within the <a> tags:

And it's as simple as that! If you need more than two sets of colors, simply add another style name with it's own set of link-states. Test out your new html page and check out if your coding works correctly.

I've found this technique useful if you need a set of colors for text links but you want to keep the borders on image links at default color values. If you have any questions on this tutorial, please feel free to contact me here.

For more info on CSS and a complete list of attributes, have a look through the MSDN Library.

Online Adult Designs has been providing adult webmasters with quality site and promo designs at reasonable prices for over a year. They can be contacted through ICQ or via their website.

When we're talking about freesites you have to understand that 1 freesite isn't enough. You need to keep building and

Click here to return to home.

Resources :: Webmaster Forum :: Add Your Site :: Advertise :: Contact Us