educational

Multiple Link Colors with CSS

Software Used: Notepad (or any HTML editor)
Skill Level: 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:

<title>CSS Test</title>
<body bgcolor="#FFFFFF">

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:

<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">
<a href="b.htm">blue link</a><br>
<a href="g.htm">green link</a>

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:

<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">
<a href="b.htm" class="text1">blue link</a><br>
<a href="g.htm" class="text2">green link</a>

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.

Copyright © 2025 Adnet Media. All Rights Reserved. XBIZ is a trademark of Adnet Media.
Reproduction in whole or in part in any form or medium without express written permission is prohibited.

More Articles

profile

WIA Profile: Leah Koons

If you’ve been to an industry event lately, odds are you’ve heard Leah Koons even before you’ve seen her. As Fansly’s director of marketing, Koons helps steer one of the fastest-growing creator platforms on the web.

Women in Adult ·
opinion

What France's New Law Means for Age Verification Worldwide

When France implemented its Security and Regulation of the Digital Space (SREN) law on April 11, it marked a pivotal moment in the ongoing global debate surrounding online safety and access to adult content.

Corey D. Silverstein ·
opinion

From Tariffs to Trends: Staying Resilient in a Shaky Online Adult Market

Whenever I check in with clients these days, I encounter the same concerns. For many, business has not quite bounced back after the typical post-holiday-season slowdown. Instead, consumers have been holding back due to the economic uncertainty around the Trump administration’s new tariffs and their impact on prices.

Cathy Beardsley ·
opinion

Optimizing Payment Strategies for High Ticket Sales

Payment processing for more expensive items, such as those exceeding $1,000 per order, can create unique challenges. For adult businesses, those challenges are magnified. Increased fraud risk, elevated chargeback ratios and heavier scrutiny from banks and processors are only the beginning.

Jonathan Corona ·
profile

WIA Profile: Lexi Morin

Lexi Morin’s journey into the adult industry began with a Craigslist ad and a leap of faith. In 2011, fresh-faced and ambitious, she was scrolling through job ads on Craigslist when she stumbled upon a listing for an assistant makeup artist.

Women In Adult ·
profile

Still Rocking: The Hun Celebrates 30 Years in the Game

In the ever-changing landscape of adult entertainment, The Hun’s Yellow Pages stands out for its endurance. As one of the internet’s original fixtures, literally nearly as old as the web itself, The Hun has functioned as a living archive for online adult content, quietly maintaining its relevance with an interface that feels more nostalgic than flashy.

Jackie Backman ·
opinion

Digital Desires: AI's Emerging Role in Adult Entertainment

The adult industry has always been ahead of the curve when it comes to embracing new technology. From the early days of dial-up internet and grainy video clips to today’s polished social media platforms and streaming services, our industry has never been afraid to innovate. But now, artificial intelligence (AI) is shaking things up in ways that are exciting but also daunting.

Steve Lightspeed ·
opinion

More Than Money: Why Donating Time Matters for Nonprofits

The adult industry faces constant legal battles, societal stigma and workplace challenges. Fortunately, a number of nonprofit organizations work tirelessly to protect the rights and well-being of adult performers, producers and industry workers. When folks in the industry think about supporting these groups, donating money is naturally the first solution that comes to mind.

Corey D. Silverstein ·
opinion

Consent Guardrails: How to Protect Your Content Platform

The adult industry takes a strong and definite stance against the creation or publication of nonconsensual materials. Adult industry creators, producers, processors, banks and hosts all share a vested interest in ensuring that the recording and publication of sexually explicit content is supported by informed consent.

Lawrence G. Walters ·
opinion

Payment Systems: Facilitator vs. Gateway Explained

Understanding and selecting the right payment platform can be confusing for anyone. Recently, Segpay launched its payment gateway. Since then, we’ve received numerous questions about the difference between a payment facilitator and a payment gateway. Most merchants want to know which type of platform best meets their business needs.

Cathy Beardsley ·
Show More