Remove ALL styling/formatting from hyperlinks

Question

I'm creating a navigation menu with words with different colors (href links). I would like the color NOT to change on any state (hover, visited etc).

I know how to set the the colors for the different states, but I would like to know the code to just leave the text color (and any other styling/formatting) as it is.

Any Suggestions?

Answer 1

You can simply define a style for links, which would override a:hover, a:visited etc.:

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

You can also use the inherit value if you want to use attributes from parent styles instead:

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

Answer 2

The property-value pair:

a {
    all: unset;
}

seems cleaner in my opinion and has the advantage to work with all the selectors, e.g.:

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

Note that this will also remove the property {cursor: pointer;} from your link. It might or might not be what you are looking for. Simply add this property in the second case.

To learn more about the all shorthand, checkout this page: https://developer.mozilla.org/en-US/docs/Web/CSS/all
As Emi said, don't forget to check for compatibility: https://caniuse.com/css-all

Answer 3

As Chris said before me, just an a should override. For example:

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

In this instance the .nav a would always be green, the :hover wouldn't apply to it.

If there's some other rule affecting it, you COULD use !important, but you shouldn't. It's a bad habit to fall into.

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

Then it'll always be green, irrelevant of any other rule.

Answer 4

if you state a.redLink{color:red;} then to keep this on hover and such add a.redLink:hover{color:red;} This will make sure no other hover states will change the color of your links

Answer 5

You can just use an a selector in your stylesheet to define all states of an anchor/hyperlink. For example:

a {
    color: blue;
}

Would override all link styles and make all the states the colour blue.