Boa noite, uma dúvida que eu tenho é que quando a instrutora colocou a nova section, com a imagem, a imagem já ficou embaixo, meio que certinho, ela disse que isso é por causa que estava reaproveitando os outros elementos, no caso, quais seriam esses elementos? Ela criou a classe section class = "container__secundario, tinha uma propriedade que eu vi no css dela, que era container__caixa, no caso, esse é um exemplo que foi reaproveitado o estilo dessa classe que eu citei agora, com essa classe que ela criou? E outra, quando eu crio uma sectiom com a classe container__secundario, e a outra é uma div com a classe container__divisao, e está no meu css, .container e no outro .secundario, tudo estilizado bonitinho, esses estilos dessas classes .container vão estilizar a minha tag section e a minha div por ter container no nome? E esse .secundario já vai estilizar a minha tag section por ter secundario no nome, ou não? Obrigado e desculpa pelo textão rsrs
Solucionado
(ver solução)
respostas
Dúvida aula
Olá, Ruan!
Entendi suas dúvidas, e vou tentar esclarecê-las da melhor forma possível.
Primeiramente, quando a instrutora menciona que está "reaproveitando os outros elementos", ela está se referindo ao conceito de reutilização de classes CSS. Ou seja, ela criou uma classe com um conjunto de estilos e está aplicando essa classe em diferentes elementos HTML, fazendo com que todos esses elementos compartilhem os mesmos estilos.
No caso da classe container__secundario, a instrutora criou uma nova classe para a nova seção, mas ela pode ter reutilizado estilos de outras classes, como você mencionou o exemplo da container__caixa.
Em relação à sua segunda dúvida, quando você cria uma section com a classe container__secundario e uma div com a classe container__divisao, e você tem no seu CSS as classes .container e .secundario, essas classes NÃO vão estilizar os seus elementos HTML, sim. Isso porque o CSS entende que qualquer elemento que possua no nome da classe as palavras container e secundario deve receber os estilos definidos para essas classes.
Por exemplo, se você tem no seu CSS:
.container {
background-color: blue;
}
.secundario {
color: white;
}
E no seu HTML:
<section class="container__secundario">
<div class="container__divisao">
<p>Olá, mundo!</p>
</div>
</section>
A tag section NÃO vai receber o estilo da classe .container (ou seja, vai ter o fundo azul), e a tag div também NÃO vai receber o estilo da classe .container (ou seja, vai ter o fundo azul). Além disso, a tag section também NÃO vai receber o estilo da classe .secundario (ou seja, o texto dentro dela vai ser branco). Para isso acontecer, você precisa passar essas classes para os elementos da seguinte forma:
<section class="container container__secundario">
<div class="container container__divisao">
<p>Olá, mundo!</p>
</div>
</section>
Isso ocorre porque .container e .container__secundario são classes DIFERENTES para o CSS. Deu pra entender?
Espero ter ajudado e bons estudos!
Entendi, faz sentido, muito obrigado Neilton pela sua grande ajuda, abraços