CSS Link Color Sample Code

by Adam Loving on February 10, 2009

Here is the CSS required to change the color of a link in HTML. If you are trying to figure out how to use CSS to change link color, this is the code you’ll need. This can be used either inside the HTML of your page, or in a separate CSS file.

<style type="text/css">
a:link {
 color: #0000ff;
}
a:visited {
 color: #00ff00;
}
a:hover {
 color: #ff0000;
 text-decoration: none;
}
a:active {
 color: #777777;
}
</style>
wrote this post.

Tagged as: ,

{ 32 comments… read them below or add one }

Software Marketing February 13, 2009 at 7:53 pm

Ah – wish I’d seen that two weeks ago :-)

john February 26, 2009 at 3:43 pm

this is great for all notepad lovers, but for those who use wysiwyg editor like dreamweaver there is such option already

kostenlos pokern February 26, 2009 at 5:38 pm

Thanks stumbled over your blog looking for the css code thank you, going to spent some more time reading. bookmarked! :-)

Web 2.0 Startups March 7, 2009 at 5:44 pm

Great little tip. Better for SEO to put it in a separate CSS file.

fashion news March 13, 2009 at 4:12 pm

My wife is learning CSS right now. This one was bugging her all last night. I’ll point her in your direction

Virtual Reception March 13, 2009 at 4:14 pm

Cool – Thanks for the tip.

Balontang March 27, 2009 at 2:45 pm

Hey, it looks just like in the edit HTML section in Blogger. I never know it is so simple and easy to understand those lines. Now I remember, the color number is like the one I see in Photoshop.

Drew March 29, 2009 at 11:44 am

Hrm, I just picked this book up at the library, and I went on the internet to see if it was any good, and it was.

Nice article!

Yuuko March 30, 2009 at 2:42 pm

thanks for this. It really helps me modify my theme faster. It really helps. I hope that more articles like this will be available in your site. Thanks so much.

bryan April 1, 2009 at 12:36 am

This has been a major source of pain for me lately. Thanks for the tip!

Webmaster Forum April 15, 2009 at 11:35 am

Please come join our forum Adam, your blog is quality and really helpful and our readers would be interested in it.

Barbara April 21, 2009 at 2:19 pm

thanks for this hint. :)

Blazintech April 21, 2009 at 3:28 pm

Thanks for this simple tutorial. But can you give us more tutorial that can be useful for web designing… Im really into that lately. I am looking forward for more of your examples.

The Name You Know April 28, 2009 at 2:59 pm

I’ve always done this from within the tags, but I’m changing to CSS now, so this will be very helpful!

Bhing May 3, 2009 at 2:46 pm

I have known how to use this code before, the problem is that I kept on forgetting how to do it.. LOL.. So thank you for sharing this..

Loltherake June 27, 2009 at 4:30 pm

Great, this is exactly what I was looking for. CSS is so useful and easy to use to create great looking and easy to maintain web pages. Cheers.

Char Dham Yatra July 3, 2009 at 6:18 pm

hey this is great for all notepad lovers, but for those who use wysiwyg editor like dreamweaver there is such option already

Traveler July 4, 2009 at 8:47 am

For some reason the link settings in CSS get mixed with my Explorer and Firefox automatic link settings. And when I set a color in CSS, then the Explorer or Firefox will still show a purple color link.

smith July 10, 2009 at 8:32 am

Its a good way to make links on the website look more appealing.
I know about hover only but now i know link active and visited.
Thank you

Videov July 27, 2009 at 9:20 am

Thank you for this sample codes.

Modern Technologies July 28, 2009 at 6:54 pm

To Clarify i add:
a:link : Default color of each link on page
a:visited : Color of link if visited once
a:hover : Color when mouse over the link
a:active : Color when that page is active.

Thanks,
Modern Technology

Laptop Video Cards August 4, 2009 at 1:32 pm

I have a lot to do with HTML coding as although I deal in refurbished gaming laptops it is not all about hardware only. It is a really nice helpful tip of using CSS within HTML to change the color of the link.

Motion Blogger August 10, 2009 at 4:47 am

This is very useful info. I am just starting to modify my CSS code and this will definitely come in handy. Thanks!

Free Wii August 11, 2009 at 4:15 pm

Is useful to learn the code. Many people now just use Dreamweaver etc… whilst they make life easier it’s not as good as learning the code yourself and using notepad!

Bluehost September 8, 2009 at 6:28 pm

CSS tips and tricks are wonderful. Always looking for useful ways to utilize the best CSS available.

iphone application developers October 15, 2009 at 10:35 am

Great, this is exactly what I was looking for. Very useful CSS tips

David R November 5, 2009 at 5:13 pm

Yes, but.
I have a link in white text on a black background. I want to modify that so that it goes yellow on hover. But on the same page I have another link in blue text on a white background. If I allow that to change to yellow on hover, it’s illegible. So I need to modify that one to go red on mouseover.
How do I change one link differently to another?

Aneel January 31, 2010 at 3:59 pm

Thanks for the code. Really nice and simple. I was looking for the script and found just right here. Checked at the notebook.

archaeology excavations July 31, 2010 at 2:43 pm

This Basic css code tips is nice.. I like but more standard formats are available in Style sheet ….

Game September 6, 2010 at 7:30 pm

Link colors are puzzling me for 1 hour. I couldn’t make the unvisited link the required color. Now I know :)

Thank you,
John

Terbaik September 22, 2010 at 6:57 pm

Thanks Alots

Kayla May 20, 2011 at 9:15 pm

Thanks so much! Soooooooo much help. =D

Leave a Comment