Display property overridden by User Agent Stylesheet

Question

As must be obvious, I am no CSS expert. I have a class

.hidden{
 display:hidden
}

and a div

<div class="hidden">
</div>

But the div is not hidden when the page is rendered. When I look at the Computed styles in Chrome, it says the display property was overridden by the user agent stylesheet. Why?

Answer 1

Css:

.hidden {    
    display: none
}

is the correct syntax.

Answer 2

If you want the element to not be visible AND not take in any space you should do:

.hidden { display: none; }

However if you want to hide the element, but let it take in space you should do:

.hidden { visibility: hidden; }

See this simple demo for an example.

The fact that you think the style is overwritten by the user-agent is that the user-agent doesn't recognize the style you are trying to use (because it is invalid).