How to change colors of links

fifthhouse · August 5, 2011, 12:02pm

I have a wordpress site and am trying to change the color of a couple links on one page of my site. I try changing the but it doesn’t work. It works with normal fonts but not with links, which retain the color from the style css. Could someone tell me how I would change the color of a link on a page?

ralphm · August 5, 2011, 2:01pm

Which<a> to you want to color differnelty? By targeting it, I mean creating a rule just for that one. For example, if you had this setup:

<p class="lala"><a href="">This is a link</a></p>

you could “target” that <a> with this rule:

.lala a {color: pink;}

Then those styles will just target that link inside the paragraph with the class of lala.

So, again, which link do you need to target?

ralphm · August 5, 2011, 1:20pm

You have to color the link itself. E.g.

a {color: red;}

However, that will most likely color all links red, so you need a way to target just the links you want to. We’ll need to see your page code to suggest how to do that. Do you have access to the HTML?

fifthhouse · August 5, 2011, 1:36pm

Hey there, and thank you very much for your help. OK, here is the html. The link I want to change the color of is: CLICK HERE TO GET STARTED NOW, which appears near the top of the page:

<img class=“size-full wp-image-2571 alignright” style=“margin-left: 30px;” title=“team” src=“http://mindfulnessangermanagement.com/wp-content/uploads/2011/04/team.jpg” alt=“conflict resolution” width=“318” height=“242” />Our 8 Week Mindfulness Approach Anger Management™ program can help you with:

<ul>
<li style=“text-align: left;”>anger problems in marriages</li>
<li style=“text-align: left;”>conflicts with co-workers or boss</li>
<li style=“text-align: left;”>anger from a separation and divorce</li>
<li style=“text-align: left;”>feelings of frustration, insecurity, and disappointment</li>
</ul>
<a href=“http://mindfulnessangermanagement.com/anger-management-programs/”>CLICK HERE TO
GET STARTED NOW</a>

<div class=“testimonial”></div>
<div class=“testimonial”>

“Mindfulness Approach Anger Management™ is a brilliantly designed program, coming from the fiery inner-depths of someone who has truly transformed his own volcanic anger into powerful wisdom. I can assert with confidence that, if you follow this course faithfully, you too will transform, finding peace and joy in your life, even if before it was littered with the wreckage of your anger.”

- Dr. Timothy Walker
Psychotherapist and author of
The Healing Circle

</div>
<div class=“testimonial”>

“Mindfulness is at the cutting edge in the field of anger management. Mindfulness Approach Anger Management™ is an excellent resource for utilizing mindfulness practice as an effective anger management tool.”

- Dr. Richard Pfeiffer
President
National Anger Management Association

</div>
Mindfulness Meditation: A Powerful Antidote to Chronic Anger

If anger is sabotaging your quality of life and destroying your peace of mind, there is a strong and effective antidote—one that’s been implemented for thousands of years and has been proven more recently through scientific research. It’s accurate to say that mindfulness is a centuries old and yet completely up to date anger management methodology. Mindfulness meditation is actually a very simple technique, and is especially effective in relieving the anger burdened mind.
<blockquote>Studies show that mindfulness helps anger management problems in a variety of ways. Extensive research shows that mindfulness increases emotional well being, improves overall satisfaction with life, creates a more flexible mind that is less easily triggered to anger, and more.</blockquote>
This research supports the thousands of years of anecdotal evidence, proving what the ancients have known all along: mindfulness works.

system · August 5, 2011, 1:38pm

I try changing the but it doesn’t work. It works with normal fonts but not with links, which retain the color from the style css. Could someone tell me how I would change the color of a link on a page?

ralphm · August 5, 2011, 1:43pm

If you just want to style all links on the page, then do this:

a {color: red;}
a:hover {color: blue;}

Of course, change to colors to suit. You have to target the actual <a> element to color it. Otherwise it will get the browser default (which is usually blue).

ralphm · August 5, 2011, 1:45pm

Looking at your sig link, I see this in your CSS:

a, a:visited, a:link {
  color: #006699;
}

That’s what’s coloring your links currently.

fifthhouse · August 5, 2011, 1:54pm

ralph_m:

If you just want to style all links on the page, then do this:
a {color: red;}
a:hover {color: blue;}
Of course, change to colors to suit. You have to target the actual <a> element to color it. Otherwise it will get the browser default (which is usually blue).

I don’t want to change all the links, just one on this page. I have tried to alter the , as I mentioned in the original post but it didn’t work for me.

Can you say more about what you mean by target the <a> element?

fifthhouse · August 5, 2011, 4:34pm

I posted the one I want to change earlier:

“The link I want to change the color of is: CLICK HERE TO GET STARTED NOW, which appears near the top of the page:”

The code is:

<a href=“http://mindfulnessangermanagement.com/anger-management-programs/”>CLICK HERE TO
GET STARTED NOW</a>

So you’re saying I have to make an addition to the style.css to change the link. I can’t do it from within the page html itself. OK I can do that…

Thank you again for your help. It’s much appreciated.

ralphm · August 6, 2011, 12:25am

Your best option is to put a special class, say, on the containing and then target it in you style sheet: e.g.

HTML

<p [COLOR="Red"]class="start"[/COLOR]><a href="http://mindfulnessangermanagement.com/anger-management-programs/">CLICK HERE TO<br>
GET STARTED NOW</a></p>

CSS

.start a {
  font-weight: bold;
  font-size: 16px;
  color: #3ca328;
}

You could, of course, place all those styles inline (that is, in the HTML), but it’s not very efficient—especially if you want to use the same style somewhere else.

<p><a [COLOR="Red"]style="font-weight: bold; font-size: 16px; color: #3ca328;"[/COLOR] href="http://mindfulnessangermanagement.com/anger-management-programs/">CLICK HERE TO<br>
GET STARTED NOW</a></p>

FFCus · August 6, 2011, 6:24pm

@fifthhouse: As a best practice in future work you should consider removing all inline styles from the HTML. Try to keep all of your CSS in a CSS file.

fifthhouse · August 7, 2011, 1:44am

OH this is great. And thanks for the heads up about css files. I"m a complete hack and have very little idea what I’m doing, so that’s a good piece of advice for me, gives me a little more sense of how things work.

FFCus · August 7, 2011, 2:23am

Not a hack…just learning