[html] How to remove the default link color of the html hyperlink 'a' tag?

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

you can do some thing like this:

a {
    color: #0060B6;
    text-decoration: none;
}

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

if text-decoration doesn't work then include text-decoration: none !important;

This will work

    a:hover, a:focus, a:active {
        outline: none;
    }

What this does is removes the outline for all the three pseudo-classes.

You have to use CSS. Here's an example of changing the default link color, when the link is just sitting there, when it's being hovered and when it's an active link.

a:link {_x000D_
  color: red;_x000D_
}_x000D_
_x000D_
a:hover {_x000D_
  color: blue;_x000D_
}_x000D_
_x000D_
a:active {_x000D_
  color: green;_x000D_
}

<a href='http://google.com'>Google</a>

Simply add this in CSS,

a {
    color: inherit;
    text-decoration: none;
}

that's it, done.

<style>
a {
color:      ;
}
</style>

This code changes the color from the default to what is specified in the style. Using a:hover, you can change the color of the text from the default on hover.

You can use System Color (18.2) values, introduced with CSS 2.0, but deprecated in CSS 3.

a:link, a:hover, a:active { color: WindowText; }

That way your anchor links will have the same color as normal document text on this system.

I had this challenge when I was working on a Rails 6 application using Bootstrap 4.

My challenge was that I didn't want this styling to override the default link styling in the application.

So I created a CSS file called custom.css or custom.scss.

And then defined a new CSS rule with the following properties:

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

Then I called this rule wherever I needed to override the default link styling.

<div class="product-card__buttons">
  <button class="btn btn-success remove_link_colour" type="button"><%= link_to 'Edit', edit_product_path(product) %></button>
  <button class="btn btn-danger remove_link_colour" type="button"><%= link_to 'Destroy', product, method: :delete, data: { confirm: 'Are you sure?' } %></button>
</div>

This solves the issue of overriding the default link styling and removes the default colour, hover, focus, and active styling in the buttons only in places where I call the CSS rule.

That's all.

I hope this helps

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

a:link{color:inherit;}

this is the simple one line can do all stuffs for you <3

.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

This is also possible:

        a {
            all: unset;
        }

unset: This keyword indicates to change all the properties applying to the element or the element's parent to their parent value if they are inheritable or to their initial value if not. unicode-bidi and direction values are not affected.

Source: Mozilla description of all