How do you change the link color of one specific link in WordPress?

Question

How do you change the color of a specific link on a post in WordPress? Do I just use CSS code right there in the post?

for example, this is what I did in the post:

<a href="http://www.google.com"><font color="FF00CC"></font>test</a>

and

<a href="http://www.google.com"><font color="FF00CC">test</font></a>

it didn't work

I don't know how to give it a class name because it's just a single word so I'm not sure I can target it in the custom CSS section.

do you know how to change the link's hover, active, and visited states too? The color that I selected for the whole WordPress site I have is different in this particular word and I'm not sure why either.

I have a class name on this entire post as a side note because I did other CSS customizations on it in the custom CSS section. I just want to target this one link on this page tho.

score 2 · Answer 1 · answered Aug 10 '18 at 07:03

You may do well reading through the basics of web design, or at least browsing the Basics of CSS. You should avoid using inline CSS unless you specifically need to, especially if you intend to use Pseudo-Classes such as :hover.

You may also consider reading over the basics of Semantic HTML5, because elements like <font> are obsolete and effectively unsupported.

Now to the root of your question, all you need to do is add a class to your link:

<a href="https://www.google.com" class="test-link">Test</a>

Then in your Appearance > Customizer > Custom CSS you can target that with a very basic selector:

.test-link {
    color: #F0C;
}

Also, since it's being selected via CSS you can now use the :hover pseudo-class, which is something you can't do with inline CSS (you would have to use inline JavaScript, which is enormously overkill for something so trivial):

.test-link:hover {
    color: #0FC;
}

Take a look at the following snippet to see it in action.

.test-link {
  color: #F0C;
}

.test-link:hover {
  color: #0CF;
}

<a href="https://google.com/" class="test-link">Test</a>

score 1 · Accepted Answer · answered Aug 09 '18 at 23:39

1

You can write an inline CSS.

<a style="color: #FF00CC" href="http://www.google.com">test</a>

answered Aug 09 '18 at 23:39

Vinicius Cainelli

616
5
16

do you know how to add a color when hovering over this link? thanks!! – user124889 Aug 10 '18 at 03:01
With JUST inline CSS, it's "impossible". You can check a complete explanation here: https://stackoverflow.com/questions/1033156/how-to-write-ahover-in-inline-css – Vinicius Cainelli Aug 10 '18 at 17:55

How do you change the link color of one specific link in WordPress?

2 Answers2