Remove ALL styling/formatting from hyperlinks

HtmlCssHref

Html Problem Overview


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?

Html Solutions


Solution 1 - Html

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

Solution 2 - Html

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 3 - Html

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 4 - Html

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 5 - Html

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

Solution 6 - Html

Define this css

// css
a.linker {
  color:#212529;
  text-decoration: none;
}

Then use the class like so:

<a class="linker" href="www.google.com"> 
  Some link
</a>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionRbijker.comView Question on Stackoverflow
Solution 1 - HtmlFrxstremView Answer on Stackoverflow
Solution 2 - HtmlAlan KersaudyView Answer on Stackoverflow
Solution 3 - HtmlSpoonNZView Answer on Stackoverflow
Solution 4 - HtmlChrisView Answer on Stackoverflow
Solution 5 - HtmlDanferthView Answer on Stackoverflow
Solution 6 - HtmlstevecView Answer on Stackoverflow