</head>
<body>
<header>
<h1><img src="logo.png"></h1>
<ul>
<li><a href="BarbeariaAlura.html">Home</a></li>
<li><a href="produtos.html">produtos</a></li>
<li><a href="contato.html">contato</a></li>
</ul>
</header>
</body>
header {
background: #BBBBBBBB;}
Faaala Daphne, tudo bem?
Eu não entendi ao certo se você quis dizer que a página inteira ficou cinza, ou se foi só o cabeçalho (header). Abri aqui no meu pc e o cabeçalho está cinza sim, igual você definiu no teu código...
Agora.. Se você quiser que a página inteira fique cinza, você vai ter que mudar o teu css, pra ao invés de selecionar a tag header, selecionar a tag body.
body {
background: #BBBBBBBB;
}Isso aconteceu porque a altura do elemento <header> é da mesma altura do conteúdo dele. Ja a altura do elemento body é a mesma altura da página. No teu código css, você tinha selecionado somente o header, então somente ele ficou cinza. Agora.. Suponhamos que você quisesse que o header ocupasse o tamanho da tela inteira, você poderia usar o seguinte código css.
body {
margin: 0;
}
header {
margin: 0;
width: 100vw;
height: 100vh;
background: #BBBBBBBB;
}
Enfim, espero ter ajudado. Bons estudos!
era pra estar igual no teu computador mas no meu nao fica assim... o meu "head" um fico com cor e outro fica branco 
</head> (aqui no vscode fica branco)
</head>
Daphne, a tag head e a tag header são duas coisas distintas.
A tag head não aparece na tela, nela você não coloca nenhum conteúdo, nela vocẽ só define algumas "configurações" pra sua página html.
Exemplo das configurações:
- o tipo de caractere que você está utilizando
- o título da página
- a importação de algum arquivo css
- entre outrosJá a tag header, aparece na tela, igual a qualquer outro elemento do tipo block.
Outra coisa, ambas as tags precisam ser abertas e fechadas, caso contrário pode bagunçar toda a sua página ex.:
<head>
....
</head>
<header>
...
</header>Então vou te mandar o código html que fará sua página funcionar:
<body>
<style>
body {
margin: 0;
}
header {
margin: 0;
width: 100vw;
height: 100vh;
background: #BBBBBBBB;
}
</style>
<header>
<h1><img src="logo.png"></h1>
<ul>
<li><a href="BarbeariaAlura.html">Home</a></li>
<li><a href="produtos.html">produtos</a></li>
<li><a href="contato.html">contato</a></li>
</ul>
</header>
</body>Aproveitando esse tópico, vou te mostrar como seria a utilização da tag head nesse exemplo de código. Nesse código pode ter algumas coisas que você não viu ainda, mas não se preocupa, pois você vai ver em breve.
<html>
<head>
<meta charset="UTF-8">
<title>Barbearia Alura</title>
<style>
body {
margin: 0;
}
header {
margin: 0;
width: 100vw;
height: 100vh;
background: #BBBBBBBB;
}
</style>
</head>
<body>
<header>
<h1><img src="logo.png"></h1>
<ul>
<li><a href="BarbeariaAlura.html">Home</a></li>
<li><a href="produtos.html">produtos</a></li>
<li><a href="contato.html">contato</a></li>
</ul>
</header>
</body>
</html>Enfim, espero ter ajudado. Bons estudos!
deu certo!
muito obrigadaaa