Curso de Css – Div e Span ( Aula 2 )

As tags div e span são usadas para agrupar pedaços do código HTML, e por sua vez não representa quaisquer alteração no “produto final” da página mas porem em conjuto com CSS e os atributos class e id pode-se resultar em estilos mais sofisticados.

A tag span é utilizada para agrupar pequenos pedaços de textos, e junto com o CSS pode-se dar estilos a palavras ou até frases, sendo que a tag div já serve para dar estilos em blocos maiores de textos ou elementos HTML.

Usando a tag Div

Para aplicar uma div a um elemento HTML basta adicionar a tag <div> no começo do elemento e a tag </div> fechando assim seu bloco de elemento.

<div>

Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy
 text ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with
the release of Letraset sheets containing Lorem Ipsum passages, and more
 recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.

</div>

Mas como disse antes a div ou span não aplicam quaisque modificações nas páginas, para aplicar estilos nas divs ou span é preciso atribuir uma class ou id .

<div id="nome-do-seletor">

Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy
 text ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with
the release of Letraset sheets containing Lorem Ipsum passages, and more
 recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.

</div>

No exemplo a cima atribuimos na tag div uma id e por sua vez coloquei um seletor com o  nome de “nome-do-seletor”

Usando a tag span

A tag span é usada da mesma forma mas com uma funcionalidade diferente, ela é usada apenas quando quero dar estilo a pequenos pedaços de elementos.

<div id="nome-do-seletor">

Lorem Ipsum is simply dummy text of the printing and
typesetting <span>industry</span>. Lorem Ipsum has been the industry's standard dummy
 text ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining <span class="nome-do-seletor">essentially unchanged</span>. It was popularised in the 1960s with
the release of Letraset sheets containing Lorem Ipsum passages, and more
 recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.

</div>

No exemplo a cima aplicamos a tag span e atribuimos uma class a ela com o nome de “nome-do-seletor”,  percebe-se que a tag span está em pequenos pedaços de textos.