How to change the color of a link in HTML?

Question

hello everyone !
I'm very new to HTML and gone through some of the basics.
<a href="URL" style="color:black;"> click here </a>
problem is that when I executed this peace of code " click here " is show in blue color..? how can I change color ? any help appreciated thank you.

Answer 1

Hi naresh,

It seems you have a cascading problem.

Your anchor element is nested inside the paragraph element. You only applied the orange color to the paragraph element, so the default style of the anchor tag (blue) will take precedence over the orange styling of the paragraph.

On another general note, it's best practice to keep the semicolons and quotation marks in your code tidy. Indentation is also a good thing. The Code Playground can be extremely forgiving and lenient in this regard, but you'll want to develop good habits for the professional world.

I hope this helps! :)

Answer 2

naresh yep it looks like Kirk's suggestion works too.
<a href style="color:black"="https://www.google.com"> help center</a></p>

Answer 3

Try this in CSS
a{
color:pink;
}

Answer 4

Thing is, that works for me (it's black) and when I look at your most recent code and add style="color:orange" to the <a> tag, the link turns orange.

Do you have a sample code showing the problem, or maybe it's how you're running the code (like in a browser???)

Answer 5

If you add:
style="color:orange"
to the <a> tags near the bottom, does it work for you?

(right now they don't have any styles applied; the color assigned to the <p> element is just for text inside the paragraph tag, not links)

Answer 6

bobbie thank you. but I have not started css and I have no idea about css 😅. is there any way that I can change the color of link by using HTML?

Answer 7

Let's reorganize the HTML lines 22-24:

22:<p align="center" style="color:orange;"><a href="https://www.google.com">forgot password ?!<a href="https://www.google.com"> </a>
23:
24:<a href="https://www.google.com"> help center</a></p>

22:<p align="center" style="color:orange;">
23: <a href="https://www.google.com">forgot password ?!
24: <a href="https://www.google.com"> </a>
25: <a href="https://www.google.com"> help center</a>
26:</p>

22 This color only affects text inside <p> (there is no text)
23 is missing the end tag </a>, and has no color (default blue)
24 is extra (ok to delete)
25 has no color (default blue)
24 or 26: The browser will detect a missing </a> and add it for you (but you don't want that; just fix the missing end tag to keep it from guessing)

Could you try this for the last link (easier to find/edit this one)?
<a href="https://www.google.com" style="color:crimson;"> help center</a>

Answer 8

Kirk Schafer thanks for that. it helped me a lot ☺

Answer 9

https://code.sololearn.com/Wqka9g2FeAg9/?ref=app

Answer 10

This is code I have writte and tried on sololearn.

Answer 11

Kirk Schafer yes I've written style="color:orange;" but it's not working..? I'm running this piece of coad on sololearn!! if try on some other browser will work ?