CSS Link Color Styles Best Practice

css link color styles best practice

That's definitely will suffice in vast majority of cases.

Just keep in mind that the correct order of styles for links is:

a:link           { color: #c00 }  /* unvisited links       */
a:visited        { color: #0c0 }  /* visited links         */
a:hover, a:focus { color: #00c }  /* user hovers, or focus */
a:active         { color: #ccc }  /* active links          */

The outline might look "ugly" for you, but that's a very important accessibility feature. If you remove that - please take care of providing an alternative way to properly distinguish the current element (bigger/bolder font, high contrast background etc.)

How do I change the font color of a link using a css class?

If you don't care about specific link states, simply do:

.amp-wp-header a {
    color:#ffffff;
}

The issue with your approach is that the comma separator is used to indicate separate selectors.

When you do:

.amp-wp-header a:active, a:visited {
    color:#ffffff;
} 

You're saying:

1. Assign this color to all a:active elements under .amp-wp-header
2. Assign this color to all a:visited elements (This one tags the whole document)

What's default HTML/CSS link color?

As of HTML5, the foreground colors of hyperlinks, among other things, are on track for standardization in the form of guidelines for expected default rendering behavior. In particular, taken from the section Phrasing content, the recommended default colors for unvisited and visited hyperlinks are the following:

:link { color: #0000EE; }
:visited { color: #551A8B; }

Notice that there is no recommended default for active hyperlinks (:link:active, :visited:active), however.

You can use these default colors and reasonably expect them to work. But keep in mind that a browser is free to ignore any or all of these guidelines, as it is never required to follow them. It is, however, recommended for a consistent user experience across browsers (which is how "expected" is defined in this context), so chances are that these colors will correspond to the defaults for most browsers. At worst, they still serve as reasonable approximations of the actual values.

In particular, the default unvisited and visited link colors in the latest versions of Firefox and Chrome are consistent with the above guidelines, but recent versions of IE report different values: unvisited links are rgb(0, 102, 204), or #0066CC, and visited links are rgb(128, 0, 128), or #800080. Older versions of Firefox (and possibly Safari/Chrome) had different defaults as well. Those are older versions, however; the main outlier today that I am aware of is IE. No word yet on whether this will change in Project Spartan — currently it still reflects the same values as the latest version of IE.

If you are looking for a standardized color scheme that is used by all browsers rather than suggested by HTML5, then there isn't one. Neither is there a way to revert to a browser's default value for a particular property on a particular element using pure CSS. You will have to either use the colors suggested by HTML5, or devise your own color scheme and use that instead. Either of these options will take precedence over a browser's defaults, regardless of browser.

If in doubt, you can always use the about:blank technique I described before to sniff out the default colors, as it remains applicable today. You can use this to sniff the active link color in all browsers, for example; in the latest version of Firefox (29 as of this update), it's rgb(238, 0, 0), or #EE0000.

Remove ALL styling/formatting from hyperlinks

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

Best Practices - CSS Theming

You should look into SASS, specifically their "Mixins" feature. It takes CSS and introduces a very DRY programmatic approach. You can override existing classes with it, making it perfect for what I think you're trying to do.

Link

---

Related Topics