in Projects, Programming, Technology |

CSS Link Color Sample Code

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>


Published

Write a Comment

Comment

32 Comments

  7. 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.

    Reply to Balontang

  9. 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.

    Reply to Yuuko

  13. 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.

    Reply to Blazintech

  15. 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..

    Reply to Bhing

  18. 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.

    Reply to Traveler

  19. 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

    Reply to smith

  24. 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!

    Reply to Free

  27. 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?

    Reply to David