I have code showing up when I "Inspect" the page that isn't anywhere in what I've written and causing text color to be "wrong," how do I fix this?

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!

Solution

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).