CSS works in Chrome but not safari? Cant change look of a href?

0
votes

I am having an odd problem. I have created a link with the class of contacter here - enter image description here

(not editing the script on this computer right now so couldn't copy/paste) and I am unable to change the look of the a href.

The page is linked to 2 stylesheets. I have tried multiple variations (putting a p inside the a href, putting a inside a div, etc) yet this:

.contacter {
color: white;
}

effectively changes look of link in chrome. Problem is it does nothing in Safari. I think something weird is going on here. In the chrome debugger I found -

enter image description here

Which seems to be causing the problem but Ive looked everywhere and can't find this user agent stylesheet. How can I change the look of the link? Is the problem the inheritance? How can I fix it?

2
htmlcssgoogle-chrome
@Tra Why would it help? – nicael
It looks like something overrides the a element. This would ensure overriding that. Although frankly, I've never encountered an issue like that before. – Traveling Tech Guy
When you see the a:-webkit-any-link, you've essentially gone past all declared CSS, and now looking at the browser's internal CSS that it uses. That will have the least priority if you decide to override any of the selectors that link is operating on. – Sunny Patel
@TravelingTechGuy didn't work – skyguy

2 Answers

0
votes

You need to specify the different selectors for anchors, as there are different ways to style them, and at different states. The user agent stylesheet is the browser's internal styling. These differ from browser-to-browser, and it is often a good idea to reset them for consistency - see CSS Reset

If you want the links to be a particular colour at all states, you can combine your selectors to use the same properties, as per below. If you want the styles to differ for each state, which is highly recommended, add separate selectors, but share common attributes in a combined selector to prevent duplication.

I have used the contacter class to prevent the link changes being global across the application.

<!DOCTYPE html>
<html>
   <head>
      <style type="text/css">
         a.contacter:link,
         a.contacter:visited,
         a.contacter:hover,
         a.contacter:active {
            color: #FFF;
            text-decoration: none;
         }
      </style>
   </head>
   <body>
      <a class="contacter" href="mailto:">contact the creators</a>
   </body>
</html>
-1
votes

Here's an example on how to properly style links on W3Schools

Basically, you can use these selectors:

a:link {
}

/* visited link */
a:visited {
}

/* mouse over link */
a:hover {
}

/* selected link */
a:active {
}

As to the user agent stylesheet - that is the bare-minimum, default styles Chrome and/or any other browser uses to render content somehow, in the lack of overriding styles. You can't physically find them - they're included inside the browser.