Até agora, vimos como você pode usar CSS para decorar seu texto, mas também podemos usar CSS para mudar o layout. da nossa página. Podemos mover as coisas, mudar o tamanho, e até fazer sobreposições. Mas o que são as coisas que queremos mover? Algumas vezes elas são elementos que já criamos, como um certo parágrafo, ou um certo título. Mas algumas vezes, elas são grupos de elementos que já fizemos, como um pedaço de texto, ou um título e alguns parágrafos. Para movê-los juntos como uma unidade, precisamos introduzir duas novas tags HTML. Que chamamos de elementos de agrupamento. Não falamos sobre elas antes de CSS, porque são apenas úteis quando combinadas com CSS. Elas não tem significado semântico para o navegador. A primeira tag é a tag , e é a que usamos para agrupar um pedaço de um texto. Digamos que queremos colorir essa palavra "Love" de vermelho. E que apenas queremos colorir a palavra e não o resto do título. Colocamos o cursor antes de "Love", digitamos a tag inicial para . Colocamos o cursor depois da palavra, digitamos a tag final, ok Agora vamos estilizar esse Poderíamos criar uma regra para colorir todos os s da página, mas talvez a gente não queira que todos sejam vermelhos. Vamos dar ao uma class "lovey-dovey", e criar uma regra apenas para elementos que tenham class "lovey-dovey". Então, .lovey-dovey, color:red. Veja como ficou o texto agora! s são bons para agrupar pedaços de texto. Como agrupamos um conjunto de elementos? Aí é que surge a tag Digamos que queremos agrupar essa seção no fim. O título "Official Info" e o parágrafo depois dele. Para fazer isso Vou colocar meu cursor antes de h3 e colocar a tag inicial de E vou até o parágrafo final e escrevo a tag final de . Temos um . Agora precisamos estilizá-lo. Para estilizar um Eu vou dar um ID para ele "official-info". E adiciono uma regra para ele aqui em cima. Então #official-info e background. Vamos torná-lo um bonito cinza. Vamos escolher... este.. Está ótimo. Agora veja que o se tornou uma caixa cinza contendo todos elementos dentro dela. E é diferente de dar a cada um separadamente um background cinza. Se tivéssemos feito assim, haveria um espaço entre eles que não ficaria cinza. Precisamos fazer um , se quisermos uma caixa ao redor de tudo. Você pode pensar em como sendo para agrupar texto. E pode pensar em para agrupar elementos. Mas há outra forma de distingui-los. Veja que há dois tipos de elementos no mundo CSS: Inline e block. Um elemento inline não tem uma linha nova depois dele. Se fizer vários deles, ficarão na mesma linha. Alguns exemplos sobre os quais já falamos são e . E você pode ver nesta imagem, como o texto flui depois dela. Não há uma linha nova depois dela. Um elemento block tem uma linha nova depois e isso é o que a maioria das tags HTML criam. Veja todos os exemplos nesta página. Os títulos, os parágrafos, a lista. O navegador coloca linha nova depois de todos eles, sem que você precise de uma tag . O que isso tem a ver com e ? Bom, um cria um elemento inline e um cria um elemento block Isto significa, que se você põe um e não adiciona outro estilo, o navegador irá tornar essa parte da página em um bloco. Como aquele texto que está envolto em um , agora têm linhas novas antes e depois. E talvez isso seja o que você quer. Apenas lembre-se da diferença. E continue.. porque há muito mais que podemos fazer com essas tags. Especialmente o poderoso ! Legendado por [Fred Guth] Revisado por [Cainã Perri]