CODEWITHSUNDEEP
htmlcsshref
Rbijker.com
Rbijker.com

Reputation: 3114

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?

Upvotes: 267

Views: 594840

Answers (5)

Alan Kersaudy
Alan Kersaudy

Reputation: 901

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

Upvotes: 47

SpoonNZ
SpoonNZ

Reputation: 3829

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.

Upvotes: 6

Freyja
Freyja

Reputation: 40804

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 */
}

Upvotes: 432

Chris
Chris

Reputation: 3795

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.

Upvotes: -1

Danferth
Danferth

Reputation: 1879

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

Upvotes: -1

Related Questions