Change CSS A HREF Link Styles

How to change hyperlink color styles

Question: How do I change hyperlink color style of my html links?

Answer: You can do this by adding CSS to your web page. Try the following to change the a href tages:

<style type=”text/css”>

a:link {
color: #333333;
a:visited {
color: #FFFFFF;
a:hover {
color: #CCCCCC;
background-color: #333333;
text-decoration: none;
a:active {
color: #333333;


a:link is the links color
a:visited is the color for all links clicked
a:hover is the link style when your mouse hovers over the link.
A:active is the color when the link is active.

If you just want to make a simple color change to all your web links, just do:

<style type=”text/css”>

a { color: #0099ff; }


In other words, all links should be #0099ff or what ever color you chose regardless if you’ve visited or are hovering over a link or not.

6 Responses

  1. Sithum says:

    Thank you for these kind of Answer. I want to know, how to add different types of stylesheets for tag

  2. Joe says:

    Neat little trick.

  3. kered says:

    I like this sample as it is just what I need for my website to help me filter data with links and change the color of them once they are selected.

  4. Thanks for the post! If you want different hyperlink colors for different links is this possible? What if I wanted one red link and another black link?

    • admin says:

      Give your anchor tag (your link tage) a class name for example:
      <a href="page_a.html" class="linkA">Link A</a>
      <a href="page_b.html" class="linkB">Link B</a>
      … and in your class before the "a" place the class names:
      #linkA a { bla bla }
      #linkB a { bla bla }

  5. Sageer says:

    use below for href::
    <a href=”{url}”>< span class=”tutorial-url”> <xsl:value-of select=”url”/></a>

Leave a Reply