2

I am getting the following when I inspect an anchor element (Computed Style)

Computed Style in Chrome Browser

Most of the posts I have seen on the internet (like this) point to incorrect Doctype. To be sure I validated both my HTML5 and CSS3 codes using w3 validators. But no joy

Can some one please explain me why user agent stylesheet is overwriting the site stylesheets ?

My source code is

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<link href="/css/basic.css" rel="stylesheet">
<title>Test</title>
</head>
<body>
<footer>
<ul class="foot-link-ul">
    <li class="foot-link-box-li"><a href="/compare-plans">Compare Plans</a></li>
</ul>
</footer>
</body>
</html>

And the CSS

footer {
    width: 986px;
    margin: 0px auto;
    padding: 50px 7px 5px 7px;
    font: 13px Arial, Helvetica, sans-serif;
    overflow: auto;
    color: #FFF;
}
Community
  • 1
  • 1
kranthi117
  • 628
  • 1
  • 8
  • 21
  • 1
    Please provide some code or a [jsFiddle](http://jsfiddle.net) – Adrift Apr 27 '13 at 17:58
  • there's probably a missing `}` in your CSS or a wrong selector. Impossible to guess without having a look at your code. – Ejaz Apr 27 '13 at 18:01

2 Answers2

3

Anchors have a higher priority than any of the container elements (divs, spans, etc...), say .nav is your container element and you've set the color to gray, the color of anchors would still be the default blueish, since it has a higher priority. To overcome this, you need to define for example .nav a or even the sitewide a in your basic.css file.

EDIT

According to your new edit, you need to define footer a.

Shomz
  • 37,421
  • 4
  • 57
  • 85
  • Thanks. That helped. I generally have inherit for anchor elements in my reset. Somehow [HTML5Doctor](http://html5doctor.com/html-5-reset-stylesheet/) seem to miss it – kranthi117 Apr 27 '13 at 18:31
  • You're welcome. I usually rely on my own reset rules, especially with small projects where you need to reset only a handful of elements, preferably as you encounter them. – Shomz Apr 27 '13 at 18:38
1

The user agent style sheet targets the <a> which would obviously overwrite any inherited style, so you have to target the <a> if you want to overwrite the user agent styles.

Musa
  • 96,336
  • 17
  • 118
  • 137