The default link color is blue.
How do I remove the default link color of the html hyperlink tag <a>
?
13 Answers
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>
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.
-
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>– wiztrailMar 29, 2012 at 22:29
-
8
-
5@DanBradbury remove 's' in text-decorations.
<a style="text-decoration:none; color:inherit;>
Oct 28, 2018 at 19:48
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;
}
-
Useful but generic patterns could cause problems if not carefully planned... USE WITH CAUTION Jul 25, 2020 at 12:49
.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
-
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.– TomApr 18, 2017 at 15:13
-
2Apparently
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.– TraxoNov 21, 2018 at 12:07
Simply add this in CSS
,
a {
color: inherit;
text-decoration: none;
}
that's it, done.
-
1I don't know, what is the issue with down voter, believe me this works... Jul 12, 2018 at 17:45
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>
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
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.
Hope this is helpful.
-
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.– Community BotNov 16, 2022 at 2:04
<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.
-
3Please edit your answer to explain how it answers the question, so that others can learn. Sep 2, 2020 at 13:03
This will work
a:hover, a:focus, a:active {
outline: none;
}
What this does is removes the outline for all the three pseudo-classes.
-
1
-
4
<a>
is blue. What's your problem now?