How do I remove the default link color of the html hyperlink 'a' tag? – Dev

The best answers to the question “How do I remove the default link color of the html hyperlink 'a' tag?” in the category Dev.

QUESTION:

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

ANSWER:

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.

ANSWER:

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>

ANSWER:

.cancela,.cancela:link,.cancela:visited,.cancela:hover,.cancela:focus,.cancela:active{
    color: inherit;
    text-decoration: none;
}

I felt it necessary to post the above class definition, many of the answers on SO miss some of the states

ANSWER:

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;
 }