[Projeto] Lista de exercício. Reset CSS com outros exercícios. | HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Reset CSS</title>
    <link rel="stylesheet" href=".//styles/style__reset.css" />
  </head>
  <body>
    <header>
      <h1 class="titulo__blog">Exercício do curso ONE Alura</h1>
      <nav></nav>
    </header>
    <main>
      <section>
        <p class="texto__destaque">
          4) Entendendo e aplicando o reset CSS Você está trabalhando em um
          projeto de site e notou que o layout está um pouco desorganizado
          devido aos estilos padrões aplicados pelo navegador. Sua tarefa é
          aplicar um "reset CSS" para remover esses estilos padrão. Comece
          criando um arquivo CSS e utilize o seletor universal * para definir a
          margin e o padding de todos os elementos para 0. Teste o efeito dessa
          mudança no layout do seu site.
        </p>

        <h2 class="urgente">Notícia urgente</h2>
        <div class="urgente__div">
          <p class="urgente__div__paragrafo">
            João Ricardo está fazendo de tudo para ser aprovado no curso ONE
            Alura, ele tem 57 anos e gosta muito de estudar!
          </p>
        </div>
      </section>
    </main>
    <footer></footer>
  </body>
</html>

* {
  margin: 0;
  padding: 0;
}

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
body{
  background-color:#F6DED8;
}

                                /* Segundo exercício */
/* 2) Destacando títulos com CSS
Imagine que você está desenvolvendo um blog e precisa destacar os títulos das postagens. Crie uma classe
 CSS chamada "titulo-blog" e aplique-a a elementos <h1>no seu arquivo HTML. Em seguida, personalize essa 
 classe no arquivo CSS para mudar a cor do texto, para dar mais destaque.
 */

.titulo__blog{
  color:#D2665A ;
  text-align: center;
}

                              /* Primeiro exercício */
/* Estilizando elementos com classes CSS
Você está trabalhando no desenvolvimento de uma página web e precisa aplicar estilos específicos a 
diferentes elementos usando classes CSS. Seu desafio é criar uma classe chamada "texto-destaque" 
no arquivo HTML para um elemento <p>e, em seguida, estilizar essa classe no arquivo CSS para 
alterar a cor do texto. Use sua criatividade para escolher cores que tornem o texto destacado, 
mas ainda legível e harmonioso com o design geral da página.
 */
.texto__destaque{
  color: #D2665A;
  font-size: 1.5rem;
  font-family: 'Krona One', sans-serif;
}

                              /* Terceiro exercício */
/* 3) Estilos situacionais com classes CSS
Você está trabalhando em um site de notícias e precisa aplicar um estilo diferente para notícias urgentes. 
Crie uma classe CSS chamada "urgente" e aplique-a a elementos <p>que contêm notícias urgentes. No CSS, faça 
com que o texto desses parágrafos seja vermelho, para chamar a atenção do leitor.
 */
 .urgente{
  color: #eb0520;
  font-family: 'Montserrat', sans-serif;
  text-align: center;
 }

 .urgente__div{
  background-color: #F6DED8;
 }

 .urgente__div__paragrafo{
  color: #eb0520;
  font-size: 2rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;

 }