Entrar Ainda não tem acesso?
1
resposta

[Dúvida] Duvida em relação a adição do container na class=

Referente ao curso HTML e CSS: praticando HTML/CSS, no capítulo Iniciando o projeto e atividade A motivação da imagem

por Luca Pereira da Silva Gianatazio
| 18.8k xp | 3 posts
Técnico Químico

Algumas duvidas duvida, pq adicionamos o container nessa class? Pq o container é puxado separados no CSS e ainda sim funciona? No CSS, poderiamos colocar o height na class principal?

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alura Plus</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>     
    </header>
    <main>
        <section class="container principal">
            <h1>Com o Combo+, você pode aproveitar a Alura+ e o Alura Língua por um preço único.</h1>
            <img src="/assets/Combo.png" alt="Imagem Combo assinatura">
        </section>
    </main>
    <footer></footer>
</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

:root{
  --branco-principal: #FFFFFF;
  --cinza-secundario: #F9F9F9;
  --botao-azul: #167BF7;
  --cinza-footer: #C0C0C0;
  --cor-fundo: #00030C;
  }

*{
    margin:0;
    padding: 0;
}
body{
    background-color: var(--cor-fundo);
    color:var(--branco-principal);
}

.principal {
    background-image: url("assets/Background.png");
    background-repeat: no-repeat;
    background-size: contain;
}

.container {
    height: 100vh;

}
1 resposta
por Renan Lima
| 3614.3k xp | 7615 posts
Alura Scuba Team Apoio Educacional - Alura

Olá, Luca.

Tudo bem?

Vamos lá, vou tentar esclarecer suas dúvidas sobre a utilização do container e a classe principal.

Por que adicionamos o container na classe?

O uso da classe container é uma prática comum para centralizar ou definir a largura máxima de um conteúdo, além de aplicar outras propriedades CSS que podem ser reutilizadas em diferentes partes do site. No seu caso, a classe container está sendo usada para definir a altura (height: 100vh;), ou seja, a altura total da janela do navegador.

Por que o container é puxado separado no CSS e ainda assim funciona?

No CSS, você pode aplicar múltiplas classes a um mesmo elemento HTML. No seu código, o <section> tem duas classes: container e principal. Isso significa que ele vai herdar as propriedades CSS definidas para ambas as classes. Por exemplo, ele terá a altura definida em container e o background definido em principal.

Podemos colocar o height na classe principal?

Sim, você pode definir a altura na classe principal em vez de container. O CSS permite essa flexibilidade. Se você quiser, pode fazer algo assim:

.principal {
    background-image: url("assets/Background.png");
    background-repeat: no-repeat;
    background-size: contain;
    height: 100vh; /* Adicionando a altura aqui */
}

E então, você poderia remover a classe container do HTML:

<section class="principal">
    <h1>Com o Combo+, você pode aproveitar a Alura+ e o Alura Língua por um preço único.</h1>
    <img src="/assets/Combo.png" alt="Imagem Combo assinatura">
</section>

Isso vai funcionar da mesma forma, mas às vezes é útil separar estilos em diferentes classes para reutilização e organização do código.

Espero ter ajudado. Qualquer dúvida manda aqui. Bons estudos.