Terminologia

Antes de começarmos, vamos fazer algumas definições para facilitar a sua leitura 👩🏼‍🏫

Seletores

Os seletores são os padrões utilizados para designar elementos da DOM a serem estilizados pelas propriedades definidas.

.minha-classe {
  // ...
}

#meu-id {
  // ...
}

input[type='text'] {
  // ...
}

Propriedades

Propriedades são pares chave-valor que aplicam determinado estilo aos elementos selecionados.

.algum-seletor {
  margin: 10px;
  color: blue;
}

Regra

Uma regra é o nome dado a um seletor ou grupo de seletores acompanhados por um grupo de propriedades.

.coffe {
  color: red;
  font-size: 10px;
}

ATENÇÃO

Se você acha que ainda não está preparado (a) para continuar, recomendamos que dê uma olhada nos seguintes links antes de prosseguir.

• Entendendo o DOM (Document Object Model)

• CSS Reference

• CSS Selector Test