background-color | HTML e CSS: praticando HTML/CSS

Olá Amanda, tudo bem contigo?

Bom primeiramente eu tenho alguns pontos para comentar sobre o seu código!

Primeiro na imagem do código CSS que você compartilhou existe um problema ali, que você colocou um código que não vai funcionar, isso porque você adicionou ao body uma propriedade que não existe, que no caso seria a cor: var(--branco-principal);, na verdade a propriedade cor não existe, acredito que você queria colocar a propriedade color correto? Então no caso o seu CSS completo ficaria algo assim:

:root {
  --branco-principal: #ffffff;
  --cinza-secundario: #c0c0c0;
  --botao-azul: #167bf7;
  --cor-de-fundo: #00030c;
}

body {
  background-color: var(--cor-de-fundo);
  /* Essa parte que eu comentei */
  color: var(--branco-principal);
}

Agora sobre o HTML, eu creio que o que está impedindo o código de funcionar é justamente o fato que você se esqueceu de fechar a tag body que é justamente onde você está aplicando os estilos CSS, portanto esses estilos não vão aplicados enquanto você não fechar a tag no documento HTML. Outra coisa que eu percebi é que na tag head você colocou uma propriedade errada, pois você escreveu <link real="stylesheet" href="styles.css"> veja que você escreveu após o nome da tag que é link você colocou a prop real="stylesheet" quando o correto é rel="stylesheet", assim o que pode estar impedindo os estilos do documento styles.css de serem ativado além dos itens citados anteriormente pode ser isso da forma como você chama o arquivo CSS no documento HTML. Então após corrigido temos um documento HTML assim:

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <title>Alura Plus</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Aqui que eu comentei que tinha o erro q vc tinha escrito "real" no lugar de "rel" -->
        <link rel="stylesheet" href="styles.css">

    </head>
    <body>
        <section class="container principal">
            <h1>Com a Combo+, você aproveitar o Alura+ e o Alura Língua por um
                preço unico</h1>
            <img src="img/combo.png"
                alt="O combo + é a junção do alura + e o alura língua">
        </section>
    <!-- E no seu documento original falta esse fechamento da tag "body" -->
    </body>
</html>

Creio que após essas mudanças todas o projeto deve rodar corretamente.

Em suma era isso, caso precise eu estarei aqui!

Abraços e bons estudos.

Caso este post tenha lhe ajudado, por favor marque ele como solução! ✓