Estilizar no CSS ao invés do HTML

Olá, Márcio! Espero que esteja tudo bem com você também.

Sua pergunta é muito pertinente. De fato, é uma boa prática manter a separação entre a estrutura do HTML e a estilização do CSS. No entanto, no exemplo que você mencionou, o Bootstrap está sendo utilizado, que é uma biblioteca de CSS com classes pré-definidas. Essas classes são adicionadas diretamente no HTML para aplicar estilos específicos.

No trecho de código que você compartilhou, as classes 'banners', 'banner-1', 'd-flex', 'flex-column', 'justify-content-center' e 'text-center' são todas classes do Bootstrap. Elas foram adicionadas no HTML para aplicar estilos específicos.

No entanto, se você preferir, pode sim criar suas próprias classes CSS e adicioná-las no HTML. Por exemplo, você poderia criar uma classe '.meu-banner' no seu arquivo CSS e aplicar os estilos que deseja. Depois, bastaria adicionar essa classe no seu elemento HTML, assim:

<section class="meu-banner">
    <!-- conteúdo do banner -->
</section>

E no seu arquivo CSS:

.meu-banner {
    /* estilos do banner */
}

Lembre-se que, ao fazer isso, você estará sobrescrevendo os estilos do Bootstrap. Portanto, é importante ter certeza de que os estilos que você está aplicando são os que você realmente deseja.

Espero ter ajudado e bons estudos!