Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Ordem do CSS

Sobre a ordem do CSS . O professor tinha falado que a ordem do CSS deve seguir a do HTML, então por que a classe "itens" vem antes do "beneficios" , h2 e ul . Foi exemplificar com o meu código que segue a aula.

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title>Barbearia Alura</title>
        <link rel="stylesheet" href="style_barbearia.CSS">
    </head>
    <body>
        <img id="banner" src="banner.jpg">
        <div class="principal">
            <h1> a Barbearia Alura</h1>

            <p>Localizada no coração da cidade a <strong>Barbearia Alura</strong> traz para o mercado o que há de melhor para o 
            seu cabelo e barba. Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos
            clientes a cada dia.</p>

            <p id="missao"><em>Nossa missão é:<strong> "Proporcionar auto-estima e qualidade de vida aos clientes"</strong></em>.</p>

            <p>Oferecemos profissionais experientes e antenados às mudanças no mundo da moda. O atendimento
            possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>
        </div>
        <div class="benefícios">
            <h2>Benefícios</h2>
            <ul>
                <li class="itens">Atendimento aos clientes;</li>
                <li class="itens">Espaço diferenciado;</li>
                <li class="itens">Localização;</li>
                <li class="itens">Profissionais Qualificados.</li>
            </ul>
            <img class="imagem beneficios" src="beneficios.jpg" width="50%">
        </div>
    </body>

</html>

Com isso o CSS do professor está assim:

.itens {
    font-style : italic
}
.beneficios {
    background: #FFFFFF;
}
h2 {
    text-align: center:
}
ul {
    ..... /isso é só uma siplificação, pois eu quero e referir principalmente a ordem
}
.imagembeneficios{
    width: 50%;
}

Mas a minha pergunta é porque não seria assim, por exemplo:

.beneficios {
    background: #FFFFFF;
}
h2 {
    text-align: center:
}
ul {
    ..... /isso é só uma siplificação, pois eu quero e referir principalmente a ordem
}
.itens {
    font-style : italic
}
.imagembeneficios{
    width: 50%;
}
 Alguém poderia me explicar melhor como seria a ordem , pois fiquei com dúvida.
2 respostas
solução!

Olha, neste caso, a ordem não altera o resultado. Mas por questões de estética e organização, seria sim melhor da maneira que você sugeriu. Acredito que o professor tenha deixado passar este detalhe, sem querer. Acontece rsrs. Bom estudos!!!

Entendi agora. E obrigado pela resposta pontual, pois é algo que se deve ser elogiado.