Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

anchor

People also ask

How do I change the default link color in HTML?

To change the color of links in HTML, use the CSS property color. Use it with the style attribute. The style attribute specifies an inline style for an element. Use the style attribute with the CSS property color to change the link color.

How do I get rid of the blue color in a link in HTML?

Set red color to the text using the hex code #FF0000 . Then, set the text-decoration property to none . The CSS below will set the text Next Page to red which is a hyperlink. The text-decoration property, which is set to none , will remove the underline and blue color of the element of the anchor tag.


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.


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

.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


Simply add this in CSS,

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

that's it, done.


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>