I believe what you are describing is happening because there is internal/embedded CSS within the HTML on that particular page in the <head> section.
<head>
<style type="text/css">
1 ...
2 ...
...
36 a...{
color: #72c02c;
}
</style>
</head>
You will need to remove or modify that to prevent it from overriding your external stylesheet (style.css).
I have this website where there is a green band displayed at the very top.
Below an abstract from the html code:
<div id="wrapper">
<!-- start header -->
<header>
<div class="site-top"> !this makes the green band at the top!
<div class="container">
<div>
<div class="pull-right">
<strong>
<a href="http://localhost/dimi_test/admin"> ! this element is displayed as green text!
<i class="fa fa-cog"></i> Dashboard
</a>
</strong>
</div>
...
My problem is that the background of the <div class="site-top"> is green and the font colour of the <a> element is the same green, making it invisible.
I tried to find out in which style sheet the <a> element is defined, so I opened google devtools. This is the result:
It seems the element is defined in .(index):36, in the style sheets that are in the screenshot, the font colour is stricken through. So I do not understand where the DOM element <a> gets its styling from.
Hope my question is more clear now.
Can you upload a screenshot of what you are describing in the dev tools here?