1. Home
2. Developer Center
3. Dreamweaver Developer Center
4. CSS Advisor

CSS Advisor

Different colours on hyperlinks

Problem

I want the hyperlinks in my page to have different colours. How do I achieve this with CSS?

Solution

Use a class selector to define two different colors, and apply the corresponding class to each hyperlink.

Detailed description

I have a php page with two hyperlinks. I want these two hyperlinks to have different colours. How do I this with CSS?

Easy- use a class selector to define two different classes that apply to the anchor tag, and give each a different value for the 'color' attribute.    By using class selectors, you'll only apply the custom colors to anchor tags with that specific class applied to them.

An example:

CSS:

a.importantlink { color: red; }
a.notsoimportantlink { color blue; }

HTML:

<a class="importantlink" href="...">...</a>
<a class="notsoimportantlink" href="...">...</a>

When displayed in a browser, the first link will have a red color applied, and the second link will have a blue color applied.  

Note that in the example, semantically-sound names are used for the CSS classes (.importantlink, .notsoimportantlink) as opposed to names that describe the actual styling (i.e. .red, .blue, etc.).  This is important, as it affords flexibility to change the actual styling in the CSS file, and have the intent of the style stay accurate and helpful in the HTML source.


Editor Note: Thanks to both Brian Crescimanno and missweblash for address the orgiinal question in the comment thread, and prompting this update to the post.

Text ID: DIFFERENT_COLOURS_ON_HYPERLINKS

---