Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Solucionado (ver solução)

<strong> e <em>

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.

6 respostas

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

solução

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.

Está resolvido sua dúvida?

Ótimo. Resolvido. Obrigado pessoal!