O motivo disso acontecer é este trecho do reset.css: font: inherit
.
Todas as propriedades que começam com font-
são modificadas quando font:
é alterado, entre elas:
font-family
font-size
font-weight
font-style
O que define a aparência de negrito ao elemento <strong>
é o font-weight: bold
. Mas sendo definido como inherit
ele herdará a propriedade do pai, que se não tiver sido modificado herdará de seu pai, e etc até chegar no elemento body
, cujo padrão é font-weight: normal
.
A mesma coisa vale para o <em>
, que tem aparência itálica por causa do atributo font-style: italic
.
Um exemplo prático:
<html>
<head>
<link rel="stylesheet" type="text/css" href="reset.css">
</head>
<body>
<ul>
<li><strong>normal</strong></li>
<li><em>normal</em></li>
<li style="font-weight: bold"><em>negrito</em></li>
<!-- a linha acima fica em negrito pois o EM herda o negrito do elemento acima, LI -->
<li style="font-style:italic"><strong>itálico</strong></li>
<!-- a linha acima fica em itálico pois o STRONG herda o itálico do elemento acima, LI -->
</ul>
</body>
</html>
O reset.css faz com que todas as tags percam suas propriedades visuais, intencionalmente, para que você utilize somente o código CSS para criar estilos e utilize corretamente o código HTML para criar conteúdo de modo semântico.