Lista de exercícios | HTML e CSS: cabeçalho, footer e variáveis CSS

1 Estilizando o cabeçalho com CSS

    .cabecalho__menu__link {
      font-family: 'Montserrat', sans-serif;
      font-size: 24px;
      font-weight: 600;
      color: #22D4FD;
  }
  
  .cabecalho {
      padding: 2% 0% 0% 15%;
  }
  
  .cabecalho__menu {
      display: flex;
      gap: 80px;
  }

2 Ajustando o espaçamento do conteúdo

    .apresentacao {
      padding: 5% 15%;
     }

3 Criando e navegando para a página "Sobre mim"

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sobre mim</title>
</head>
<body>
    <h1>Sobre mim</h1>
</body>
</html>

4 Ajustando a estilização após reorganização de arquivos página index.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <!-- ... -->
    <link rel="stylesheet" href="./styles/styles.css">
     <!-- ... -->
</head>

style.css:

.cabecalho__menu__link {
    /* */
    text-decoration: none;
}

5 Estruturando a página "Sobre mim" com cabeçalho e rodapé about.xhtml

<!DOCTYPE html>
<html lang="pt-br">
<body>
    <header class="cabecalho">
        <!-- ... -->
    </header>
    <main></main>
    <footer class="rodape">
        <!-- ... -->
    </footer>
</body>
</html>

6 Importando e corrigindo o caminho do arquivo CSS na página "Sobre mim" about.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <!-- ... -->
    <title>Sobre mim</title>
    <link rel="stylesheet" href="./styles/styles.css">
</head>
<body>
    <!-- ... -->
</body>
</html>