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

Question

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

Lechery

Default text color for <a> is blue. What's your problem now? – Menfolk

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

@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... – Leticia

Answer 1

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>

Doggy

Answer 2

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.

Tiffaneytiffani

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> – Praenomen

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

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

Answer 3

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

Benedictbenedicta

Useful but generic patterns could cause problems if not carefully planned... USE WITH CAUTION – Choroid

Answer 4

.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

Levesque

Answer 5

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

Sty

You could, but just because you can doesn't mean you should. I'd say given the nature of this rule you should really include a little more about what it actually does. – Suffocate

Apparently color: unset also works. I removed framework colors from the element, then wrapped the element and set my custom color on that wrapper so the color is inherited. – Endora

Answer 6

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 {
  color: red;
}

a:hover {
  color: blue;
}

a:active {
  color: green;
}

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

Jehad

Answer 7

Simply add this in CSS,

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

that's it, done.

Please

I don't know, what is the issue with down voter, believe me this works... – Please

Answer 8

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.

Dorran

Answer 9

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

Flexible

Answer 10

Just use this:

  a {
    cursor: default;
  }

Titograd

Answer 11

a:link{color:inherit;}

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

Lynden

Answer 12

I too wanted to remove the default blue link color of a tag. As I was using bootstrap version 5 I decided to look for the solution in bootstrap documentation. I searched for "link color" and the result was this link: "https://getbootstrap.com/docs/5.0/helpers/colored-links/"

bootstrap version 5.0 has a class to customise the link colors which I found very helpful and also I was able to change the default blue color of my 'a' tag without any fuss.

Borlase

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Pliers

Answer 13

Here are two methods to remove the default link color:

**Method 1: Remove default color:

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

**Method 2: Using a specific color like

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

Applegate

Answer 14

This will work

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

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

Unstoppable

Please provide a little more explanation as to why this works. – Anadem

The question isn't asking about the outline – Doggy

Answer 15

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

Maryannmaryanna

Please edit your answer to explain how it answers the question, so that others can learn. – Erlond