Remove ALL styling/formatting from hyperlinks

Problem

I’m making a navigation menu out of text in various colors (href links). On any state, I don’t want the color to change (hover, visited etc).

I understand how to change the colors of the states, but I’d like to know how to leave the text color (and any other styling/formatting) alone.

Any Suggestions?

Asked by Rbijker.com

Solution #1

You may just declare a link style that will override a:hover, a:visited, and so on:

a {
  color: blue;
  text-decoration: none; /* no underline */
}

If you want to use characteristics from parent styles instead, you can use the inherit value:

body {
  color: blue;
}
a {
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
}

Answered by Frxstrem

Solution #2

Just an a should override, as Chris stated before me. Consider the following scenario:

a { color:red; }
a:hover { color:blue; }
.nav a { color:green; }

The.nav a would always be green in this case, and the:hover would not apply.

If there’s another rule that applies, you COULD use! You shouldn’t, yet it’s important. It’s not a good habit to get into.

.nav a { color:green !important; } /*I'm a bad person and shouldn't use !important */

Then, regardless of any other criterion, it will always be green.

Answered by SpoonNZ

Solution #3

The property-value pair:

a {
    all: unset;
}

In my perspective, it is cleaner and has the advantage of working with all tags. As a result, it gives you a faster way to do the same thing with other tags, such as:

a, button /* &c... */ {
    all: unset;
}

Answered by Arpenn Sardin

Solution #4

To define all states of an anchor/hyperlink, simply use an a selector in your stylesheet. Consider the following scenario:

a {
    color: blue;
}

All link styles would be overridden, and all states would be blue.

Answered by Chris

Solution #5

If you use a.redLinkcolor:red;, you can use a.redLink:hovercolor:red; to keep the link on hover. This ensures that no other hover states alter the color of your links.

Answered by Danferth

Post is based on https://stackoverflow.com/questions/8919682/remove-all-styling-formatting-from-hyperlinks