CODEWITHSUNDEEP
htmlcsshyperlink
Abdi
Abdi

Reputation: 13

How to give 2 different Hyperlinks in css different colors

My aim is that a hyperlink is displayed in a green color. I already have given this hyperlink a class .ueberschrift_name.

I tried to change the color with CSS and HTML with no luck. I want to change the color of the existing hyperlink from white to green. I hope someone can give me a hint how to solve this problem for me.

Upvotes: 0

Views: 369

Answers (3)

daniel aagentah
daniel aagentah

Reputation: 1702

Add the "ueberschrift_name" class to your HTML element. Then add the following:

CSS:

.ueberschrift_name{
    color: red;
}

HTML:

<a href="default.asp" class="ueberschrift_name" target="_blank">This is a link</a>

JSfiddle: http://jsfiddle.net/zLofsecL/

OR - you can use inline styles:

<a href="default.asp" style="color: red;" target="_blank">This is a link</a>

Upvotes: 1

tetley-titan
tetley-titan

Reputation: 71

You can set a class for each of your anchor text hyperlinks.

<div>
<a href="#" class="green-name"><h2>Name 1</h2></a>
<a href="#" class="white-name"><h2>Name 2</h2></a>
</div>

Then simply define the color in your CSS, if you don't see any changes try using the !important rule to override:

.green-name {color: green !important;}

.white-name {color:white !important;}

Hope this helps

Upvotes: 0

Bram Vanroy
Bram Vanroy

Reputation: 28437

It probably doesn't work because of CSS selector priority.

Easy solution (not really recommended):

.ueberschrift_name {color: green !important;}

Better solution: figure out which rule is setting the colour of the links to white, then copy that line of code and append your class, and set it to green. E.g.:

.my-parent-class a {color: white;}
.my-parent-class a.ueberschrift_name {color: green;}

Upvotes: 0

Related Questions