Aprenda CSS básico criando um menu de restaurante - Passo 13

Conte-nos o que está acontecendo:
Está dando erro no código e não sei o motivo.

  **Seu código até o momento**
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Cafe Menu</title>
  <style>
    h1 {text-align: center;}
  </style>
  <style>p{text-align:center}</style>
  <style>h2{text-align:center}</style>
</head>
<body>
  <header>
    <h1>CAMPER CAFE</h1>
    <p>Est. 2020</p>
  </header>
  <main>
    <section>
      <h2>Coffee</h2>
    </section>
  </main>
</body>
</html>
  **Informações de seu navegador:**

Agente de usuário: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.5112.102 Safari/537.36 OPR/90.0.4480.100

Desafio: Aprenda CSS básico criando um menu de restaurante - Passo 13

Link para o desafio:

Perdão, não tinha visto.

Você não precisa criar novas tags <style>, você deve adicionar os seletores H2 e P dentro da tag style já feita. :blush:

1 Like

Certo, eu coloquei eles todos os três( h1,p E o h2) dentro da mesma tag , mas não funcionou mesmo assim, criei outro tópico de dúvida sobre o assunto com uma nova imagem de como ficou!

Conte-nos o que está acontecendo:
Descreva detalhadamente o problema aqui.

  **Seu código até o momento**
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Cafe Menu</title>
  <style>
    h1 p h2 {text-align: center;}
  </style>
  
</head>
<body>
  <header>
    <h1>CAMPER CAFE</h1>
    <p>Est. 2020</p>
  </header>
  <main>
    <section>
      <h2>Coffee</h2>
    </section>
  </main>
</body>
</html>
  **Informações de seu navegador:**

Agente de usuário: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.5112.102 Safari/537.36 OPR/90.0.4480.100

Desafio: Aprenda CSS básico criando um menu de restaurante - Passo 13

Link para o desafio:

Olá, @Luan. O CSS tem uma sintaxe bem peculiar. Se você coloca um elemento ao lado do outro, como nesse caso em que você colocou h1, p e h2 na mesma regra, ele interpretará como se você estivesse querendo estilizar o elemento h2 filho do elemento p que, por sua vez, é filho de um elemento h1.

Para estilizar os três, portanto, é preciso separá-los por vírgulas. Assim, coloque vírgulas entre os elementos que você quer estilizar do mesmo modo e teste novamente. Depois, retorne para nós aqui o resultado. Bons estudos. :smiley:

2 Likes

Certo, 2 problemas aqui.

Primeiro que apesar de podermos fazer isso, dar atributos a mais de 1 seletor ao mesmo tempo, é preciso separar eles com vírgula, assim:

h1, h2, h3, a {
  blabla: 123px;
}

O segundo problema é que nesta etapa você é obrigado a colocar seletor separado para cada um dos que são pedidos:

h2 {
  blabla
}
h3 {
  blabla
}
2 Likes

Verdade, @weslleyend! O enunciado fala sobre usar um novo seletor de tipo para cada um. Assim, @Luan, não se deve colocar todos eles juntos, como eu sugeri antes, em uma mesma regra, mas criar uma separada para cada um, como no exemplo que o @weslleyend deu ao final. :smiley:

2 Likes

Agora sim deu certo, muito obrigado @danielrosa e @weslleyend !

2 Likes