'Remove ALL styling/formatting from hyperlinks

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?

htmlcsshref


Solution 1:[1]

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

Solution 2:[2]

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.

Solution 3:[3]

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.

Solution 4:[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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 tolik518
Solution 3 Chris
Solution 4 Danferth

Related Questions