0

I've used the color attribute in my css in the appropriate div, but it's not changing the color on the screen. Having no idea what's happening, I finally went to Inspect, and there is code showing up I have not included anywhere in my html file. I don't know how it's arrived to be there, and how to override or delete it.

This is the code I'm finding I did not write anywhere:

a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}

It notes "user agent stylesheet," but again, I have not written anything like this. I searched my code for "webkit" just in case, and no results. Please help me understand where this is coming from, and what I can do to change the color (since it's not actually in my code anywhere).

Thank you!

enlguy
  • 27
  • 6
  • which browser are you using, also did you checked with another browser? it may be an extension overriding your content style. – denolk Aug 07 '20 at 05:28

1 Answers1

1

That code is the default style provided by your browser (hence "user agent stylesheet").

You'll have to write your own style for the element if you wish to override it.

In this case:

a {
    color: #0066cc;
}

If you wish to style only some of your links, you can add classes to them:

a {
  color: #0066cc;
}

a.different-color {
    color: #cc1100;
}
<a href="#">A link</a><br />
<a href="#">A link</a><br />
<a href="#" class="different-color">A link with different color</a><br />
<a href="#">A link</a><br />

In order to avoid the user-agent stylesheet to override your own, be as specific as possible (it is also a CSS best-practice). Specific selectors will avoid side-effects (such as inadvertently styling other elements).

See also this question and answer

beerwin
  • 9,813
  • 6
  • 42
  • 57
  • 1
    Superb response. I got it fixed, and appreciate the additional info and link, fantastico! – enlguy Aug 05 '20 at 12:30
  • I did just notice the text has now shifted left, for some reason. I added text-align and margin code to the new class, and no change. The code matches the code for other links identically in terms of alignment attributes. Any idea, or is this now a new question? – enlguy Aug 05 '20 at 13:26
  • Post this as a new question, preferably with code which reproduces your issue. – beerwin Aug 06 '20 at 11:02