não consigo altera a cor de fundo e as letras | 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">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <title>agora</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <header>
        <main>
            <h1>Eleve seu negócio digital a outro nível <strong>com um Front-end de qualidade!</strong></h1>
            <p>Olá! Sou Joana Santos, desenvolvedora Front-end com especialidade em React, HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
            <a href="https://instagram.com/realmadrid">instagram</a>
            <img src="OIP.jpg" alt="Imagem">

        </main>
        <footer>
            estou treinando tmj
        </footer>
    </header>
</body>

</html
    body {
    background-color: blue;  
    color: white;
  }

Olá, Carlos!

O seu código está correto, mas se você inseriu as regras de estilo CSS diretamente no seu arquivo HTML, mas fora da tag <style>. As regras CSS não vão funcionar a menos que esteja dentro dentro de uma tag <style> no <head> do seu documento HTML ou em um arquivo CSS separado.

Se você quiser manter as regras CSS no mesmo arquivo HTML, você pode fazer assim:

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <title>agora</title>
    <style>
        body {
            background-color: blue;  
            color: white;
        }
    </style>
</head>

<body>
    <!-- seu código aqui -->
</body>

</html>

No entanto, conforme a aula que você está acompanhando, a melhor prática seria manter o CSS em um arquivo separado. Você mencionou que tem um arquivo chamado styles.css. Então, você deve mover as regras CSS para esse arquivo. Seu arquivo styles.css ficaria assim:

body {
    background-color: blue;  
    color: white;
}

E no seu arquivo HTML, você deve manter a tag <link> que referencia o arquivo styles.css. Certifique-se de que o nome do arquivo e o caminho estão corretos. Se o arquivo styles.css estiver na mesma pasta do arquivo HTML, você pode deixar como está:

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <title>agora</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <!-- seu código aqui -->
</body>

</html>

Em caso de persistência, compartilhe seu projeto no Google Drive ou envie mais informações a o print dos seus arquivos e como está o seu código, e lembre-se de fechar a tag HTML <html> Conteudo </html>.

Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Mergulhe em programação