Agrupamento de Elementos

Os elementos de agrupamento se dividem em alguns grupos,
Block-Level, Inline e Seletores Personalizados de Agrupamento

Os elementosdive span são usados para agrupar e estruturar um documento e são frequentemente usados em conjunto com os atributos class e id.

Elementos Block-level

O elemento div é um elemento block-level.
Tem a função de agrupar elementos html, definindo blocos de contéudo sempre iniciando uma nova linha e ocupando toda a linha.
Exemplo:

Elementos Inline

O elemento span é um elemento inline. É um elemento neutro embutidos que marcam um bloco dentro de uma mesma linha ou parágrafo. Pode ser usado pelo CSS para estilização de partes específicas do conteúdo do documento HTML

Seletores Personalizados

Possibilita personalizar tags do documento HTML para estilização. Temos os seletores do tipo classe e o seletor do tipo id

Seletor do tipo id

O seletor de id usa o atributo id de um elemento HTML para selecionar um elemento específico. Cada id é única. O seletor de id é representado por “#”.

Seletor do tipo classe

O seletor de classe seleciona elementos HTML com um atributo de classe específico.O seletor de classe é representado por um ponto, “.”, e tem como alvo elementos com um determinado valor para seu atributo class. Para casos em que haja necessidade de mais de um elemento com a mesma identificação usamos o atributo class.

Pseudo-Classes

Usada para definir um estado especial de um elemento. O seletor de classe é representado por dois pontos, “:”. Estão relacionados a um elemento ou uma classe.

Pseudo-Elementos

Usado para estilizar partes específicas de um elemento.O seletor de classe é representado por dois pontos seguido de dois pontos, “::”