Categories
anchor css html

How do I remove the default link color of the html hyperlink ‘a’ tag?

326

The default link color is blue.
How do I remove the default link color of the html hyperlink tag <a>?

3

  • Default text color for <a> is blue. What’s your problem now?

    – VMAtm

    Jul 17, 2011 at 7:19

  • I am trying to get if dint give any color to <a>, I don’t want it to show in blue color. It in the default text color, the text color may be black or blue like that…

    – Rafiu

    Jul 19, 2011 at 7:07

  • 5

    @Terry_Brown – I found this question quite useful, as I wanted to find the “color:inherit” answer below, which is what I believe the question was relating too…

    – Sk93

    Nov 7, 2012 at 14:49

643

The inherit value:

a { color: inherit; } 

… will cause the element to take on the colour of its parent (which is what I think you are looking for).

A live demo follows:

a {
  color: inherit;
}
<p>The default color of the html element is black. The default colour of the body and of a paragraph is inherited. This
  <a href="http://example.com">link</a> would normally take on the default link or visited color, but has been styled to inherit the color from the paragraph.</p>

0

    95

    Try something like this:

    a {
        color: #0060B6;
        text-decoration: none;
    }
    
    a:hover {
        color:#00A0C6; 
        text-decoration:none; 
        cursor:pointer;  
    }
    

    If text-decoration doesn’t work, change it to:

    text-decoration: none !important;
    

    The !important rule overrides every other styling to the text-decoration attribute. You can read more about it here.

    3

    • moreover, if you want to prevent the change of color for a specific link after pressing it, add inside the a tag: <A STYLE=”text-decoration:none; color=[select your favorite…]” HREF=”link.html”> test link</A>

      – wiztrail

      Mar 29, 2012 at 22:29

    • 8

      <a style="text-decorations:none; color:inherit;> = winning

      Nov 20, 2014 at 1:45

    • 4

      @DanBradbury remove ‘s’ in text-decorations. <a style="text-decoration:none; color:inherit;>

      Oct 28, 2018 at 19:48


    34

    If you don’t want to see the underline and default color which is provided by the browser, you can keep the following code in the top of your main.css file. If you need different color and decoration styling you can easily override the defaults using the below code snippet.

     a, a:hover, a:focus, a:active {
          text-decoration: none;
          color: inherit;
     }
    

    1

    • Useful but generic patterns could cause problems if not carefully planned… USE WITH CAUTION

      Jul 25, 2020 at 12:49