Question

Title too vague? Here is an example:

Html:

<h1>Heading 1</h1>
<h1 class='header'>Heading 2</h1>

CSS:

h1 {
font-size: 2px;
}

.header {
font: 12px;
}

On the website both Heading 1 and Heading 2 have a font-size of 2px. Why is this?
Is there a hierarchy that I do not know of? If so where can I read more about it? Because I have been looking but have no clue.

—EDIT—
Ok fist example was just an amazingly stupid typo…. Thank for the minus -1. And thanks for your answer dystroy, although that was just a pure coincidence that this happened in my example.

Therefore I will now give the real example and hopefully it is not again something trivial.

html:

<div class="container-fluid">
<div id="content" class="product-info">
<div class="product_overview_wrapper span-fluid250-overview product-info">
<h3 style="heading_price" id="heading_price_id">PRICE:</h3>
</div>
</div>
</div>

CSS:

.product_overview_wrapper h3 , .product_overview_wrapper p {
font-family: 'Ovo', serif;
font-size: 1.1em;
font-weight: lighter;
color: #363636;
margin-top: 19px;
line-height: normal;
}

.heading_price {
margin-top: 100px;
}

I styled h3 one time earlier as shown above. However my .heading_price style has no effect at all. I do not even see it in chrome when I check the elements… hope someone can help and this does not cost me points again 😉

Answer 1

Change

.header {
font: 12px;
}

to

.header {
font-size: 12px;
}

When you use font, it’s a shorthand and can’t be limited to just the size.

See reference :

There are few caveats when using the CSS font shorthand. If these
conditions are not met, the property is invalid and is entirely
ignored. Except when using a keyword, it is mandatory to define the
value of both the font-size and the font-style properties.