Style CSS - Não Aplicado | HTML e CSS: responsividade com mobile-first

O código css estudado durante o curso, não funcionou no meu projeto, ao aplicar as variáveis no style css:

body { background-color: var(--background); font-family: var(--fonte-principal); font-size: 16px; font-weight: 400; }

O Style acabou não sendo aplicado no Menu.

Resolvi a questão aplicando o mesmo no header.css na tag .cabeçalho

Alguém poderia me dizer se fiz correto? ou se tem algo de errado no meu codigo ?

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="/styles/style.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="/styles/reset.css">
    <title>AluraBooks</title>
</head>
<body>
    <header class="cabeçalho"> 
        <div class="container" >
            <input type="checkbox" id="menu" class="container__botao"> 
            <label for="menu">
                <span class="cabeçalho__menu-hamburguer container__imagem"> </span>
            </label>
            <ul class="lista-menu">
                <li class="lista-menu__titulo">Categoria</li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">PROGRAMAÇÃO</a>
                </li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">FRONT-END</a>
                </li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">INFRAESTRUTURA</a>
                </li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">BUSINESS</a>
                </li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">DESIGN & UX</a>
                </li>
            </ul>
           <img src="assets/Logo.svg" alt="Logo da ALura">
         </div>
         <div class="container" >
           <a href="#"><img src="/assets/Favoritos.svg" class="container__imagem" alt="Meus Favoritos"> </a>
           <a href="#"><img src="/assets/Sacola.svg" class="container__imagem" alt="Minhas Compras"> </a>
           <a href="#"><img src="/assets/Usuário.svg" class="container__imagem" alt="Meu Perfil"> </a>
         </div>
    </header>
</body>
</html>

**style.css**
``@import url(../styles/header.css);

:root { --background-menu: #FFFFFF; --background: #EBECEE; --color-categorias: #EB9B00; --azul-degrade: var(--teste, linear-gradient(160deg, #002F52 0%, #326589 100%)); --fonte-principal: "Poppins";

}

body { background-color: var(--background); font-family: var(--fonte-principal); font-size: 16px; font-weight: 400;

} ``

Olá, Natan.

O problema está na ordem ao importar os arquivos CSS na tag <head> do html.

Você está importando primeiro o arquivo style.css, e as fontes do google, mas só por último que está importando o reset.css, e este arquivo acaba removendo ou sobrescrevendo os estilos que tinha importado antes.

O correto é importar primeiro o arquivo reset.css que é responsável por remover os estilos padrão do navegador, em seguida os links para as fontes do google e por fim o seu arquivo style.css. Com isso, os estilos serão aplicados corretamente.

Outra dica que posso te passar é ter cuidado ao nomear as classes e verificar se a classe que nomeou para uma tag no html está idêntica ao seletor css que digitou no arquivo style.css.

E evite utilizar caracteres com acentos (á, é, ô, ç). Um erro muito comum entre os alunos é nomear a tag <header> como "cabeçalho" sem remover o cedilha (ç). o certo seria:

<header class="cabecalho">

Espero ter ajudado.