Solucionado
Meu HTML e CSS estão funcionado normalmente. Porém tenho uma dúvida. Não compreendi porque as tags <strong> e <em> perdem o seu efeito ao utilizarmos o "reset.css". Eu explorei este arquivo e encontrei apenas sobrescrições referentes a margens e tamanhos de fonte. Automaticamente quando sobrescrevemos as características destas tags, mesmo que seja referente a outro atributo, nós perdemos o seu efeito original? É isto que acontece? O que ocorre por trás dos panos?
Obrigado.
porque ela reseta essas propriedades acho
Calma, isto será passado conforme o curso em vídeo. Isto acontece por conta do reset.css que reseta algumas coisas indesejadas e outras desejadas.
Mas por meio de dúvidas você pode fazer isto
em {
font-style: italic;
}
strong {
font-weight: bold;
]Tente está aplicação em seu CSS
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-styleO 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.
Está resolvido sua dúvida?
Ótimo. Resolvido. Obrigado pessoal!