style h1 inside a div

I want to style a h1 headline inside a div, but no matter what I try it always remains bold.

js fiddle

.header h1 { font-style: normal; color: grey; }

<div> <h1> Hello World </h1> </div>

2 Answers

You need font-weight:

.header h1{ color: grey; font-weight: normal; } 

Demo:

font-style has nothing to do with bold:

The font-style CSS property allows italic or oblique faces to be selected within a font-family.

You want font-weight instead:

The font-weight CSS property specifies the weight or boldness of the font. However, some fonts are not available in all weights; some are available only on normal and bold.