<div class="principal centralizado">

Fala Luiz!

Tranquilo?

Então, vamos lá, o CSS funciona em modo cascata (como o próprio nome diz Cascading Style Sheets), então olhando o seguinte código eis o que ele interpreta:

// CSS

div {
    border: 1px solid blue;
    color: orange;
}

.principal {
    background-color: red;
    color: white;
}

.centralizado {
    width: 700px;
    margin: 0 auto;
}

// HTML

<div class="principal centralizado">

O elemento HTML é uma div? Ôpa, então ele vai receber border: 1px solid blue; e color: orange;!

Bom, ele tem classes? tem, uma delas é .principal? É! então ele vai receber background-color: red; e color: white;, mas pera aí?! ele já tinha o atributo color, então sobrescreve!

A outra classe é .centralizado? É! então recebe width: 700px; e margin: 0 auto;.

Espero que tenha ajudado!

Abraços!

Apenas como curiosidade também, o CSS tem prioridade com declarações mais direcionadas, independente da ordem que você coloca, como neste LINK de exemplo que fiz, o

div.principal {
  height: 50px;
  background-color: #CCC;
  border: 2px solid black;
}

vem antes de todos mas os outros códigos que vem depois não sobrepõe as propriedades dele pois semanticamente ele é o mais correto, pois eu condiciono ele a ser uma DIV com a classe Principal, que é muito mais relevante do que apenas as que são DIV ou que tem a classe Principal.

Então o CSS olha e vê div.principal{...}, div{...} e .principal{...} mas considera o mais relevante para definir as propriedades, neste caso o div.principal{...}, lembrando que se em algumas das outras conter uma propriedade que não defini no div.principal{...} ele irá herdar normalmente.

Espero ter ajudado!

Abraços!

Ual! Ficou muitíssimo claro! Muito obrigado, Luiz Fernando!

Muito bom saber desta div.principal{...}, eu ainda não conhecia este atributo CSS.

Só uma dúvida antes de marcar como solucionado e encerrar o tópico. O que é mais comum? Estas classes separadas individualmente ou estas de uma tag condicionado a uma classe como você demonstrou agora?

Então Luiz,

Daí vai depender do seu projeto e das classes que você atribuir, mas geralmente não é muito recomendado condicionar muito o seu CSS, mas por exemplo, eu quero que todos os elementos que tenham a classe .red tenham o atributo color: red;, logo:

.red {
    color: red;
}

Mas eu quero que todos os botões que tenham a classe .red além da cor tenham a borda, logo:

.red {
    color: red;
}

button.red {
    border: solid 1px red;
}

Então qualquer elemento HTML que tiver a classe .red terá a cor vermelha, porém só os <button class="red"> terão a cor e a borda vermelha .

Por isso que eu disse que depende, você pode criar classes padrões para formatação da sua página, e condicionar algum CSS para casos específicos, outro exemplo bastante utilizado é quando na sua página você tem várias <section>, e você quer que todas tenham o mesmo padrão, dai você cria section {...}, mas como você tem várias, algumas delas você quer que seja a orientação do texto pra esquerda, outras para direita e outras centralizadas, então você cria as classes .direita{...} .esquerda{...} .centralizada{...}, daí no html você combina <section class="centralizada">, até por que neste caso você não atribuiu que as classes são utilizadas apenas em section, ou seja, uma div pode ter as classes também, mas na sua página, por padrão, toda section que for centralizada, você quer que ela ocupe 100% de largura, então você coloca no CSS section.centralizada { width: 100%; }, dai você condiciona o seu código a aplicar esse CSS apenas para as section que tenha a classe centralizada.

Só cuidado ao condicionar muito o seu CSS, por que daí pode complicar na manutenção, por exemplo no meu caso do botão, se eu mudar o meu HTML e ao invés de usar <button class="red"> eu trocar por um <a href="#" class="red"> o CSS aplicará apenas a cor vermelha, e não a borda. Daí você precisaria corrigir todos os lugares do CSS que você utilizava a vinculação com o button.

Espero ter ajudado!

Abraços!

Muito obrigado, Luiz foi muito esclarecedor e de fácil compreensão!

Confesso que antes de você falar fiquei um pouco receoso de usar muitas classes e acabar me perdendo ou ficando confuso quando eu mesmo for criar meus projetos. Vou fazer algum curso aqui de CSS depois para me sentir seguro ao usa-las em momentos certos.

Mais uma vez obrigado pelos esclarecimentos e explicações! Ajudaram bastante!

Massa Luiz!

Faça todos os cursos de CSS sim, são bons, mas deixe essa página aqui nos seus favoritos:

w3Schools

É uma grande biblioteca HTML/CSS/JS, com todos os métodos e propriedades e quais navegadores tem suporte e vários exemplos também!

Abraços!