Curso de CSS – Classes e Id ( Aula 3)

Os atributos HTML id e class servem para nomear qualquer grupo de elementos, ambos tem a mesma função porém existe uma diferença, bom quando atribuimos id o elemento terá um “Identificador único e exclusivo”, ou seja o nome que se da à esse elemento atribuido ao id só poderá ser usado neste grupo, já com o atributo class nós podemos nomear vários grupos de elementos com o mesmo nome.

Esses dois atributos têm várias funções em uma página HTML:

• como seletores de folhas de estilos (CSS).

• como links que são associados a hiperlinks.
• meio de referenciar um determinado elemento a um script.
• como nome declarado de um elemento objetc.

Com aqui é um curso CSS nós veremos com usar os atributos HTML id e class como seletores em uma folha de estilo

Usando o atributo ID

Os elementos que usaremos para nomear o atributo id serão as tags div e span que estudamos na aula passada Curso de CSS – Div e Span ( Aula 2) .

Neste exemplo criei uma div com o nome de “exemplo” e um span com o nome de “exemplo-2″.

<div id="exemplo">

Lorem Ipsum is simply dummy text of the printing and typesetting
industry.<span id="exemplo-2">conteúdo da span</span>Lorem Ipsum
is simply dummy text of the printing and typesetting industry.

</div>

Nós usaremos o nome  que acabamos de dar ao atributo id na folha de estilo, esse nome  em CSS é um seletor então aplicaremos propriedades e valores à essas propriedades para esse seletor que neste caso chama-se exemplo.

Como o atributo id é um Identificador único e exclusivo não foi possível nomear a tag span com o mesmo nome da tag div então nomeei de exemplo-2.

Independente onde você usar o CSS como, in-line, interna ou externa você vai aplicar um seletor id da mesma forma;

• Veja como aplicar CSS de forma in-line, interna ou externa

Para identificarmos que um seletor vem  de um atributo id nós aplicamos o caractere jogo-da-velha “#” à frente do seletor.

#exemplo { propriedade: valor;}
#exemplo-2 { propriedade: valor;}

Usando o atributo class

O exemplo a baixo é aplicado várias divs e spans e nomeamos essas divs e spans com o atributo class, então por sua vez colocamos os mesmos nomes para esses grupos de elementos.

<div class="exemplo">
Lorem Ipsum is simply dummy text of the printing and typesetting
 industry.Lorem Ipsum is simply dummy text of the printing
 and typesetting industry.
<span class="exemplo">conteúdo da span</span>
 </div>

 <div class="exemplo">
Lorem Ipsum is simply dummy text of the printing and typesetting
 industry.Lorem Ipsum is simply dummy text of the printing
 and typesetting industry.
 </div>

 <span class="exemplo">conteúdo da span</span>

Em CSS para nós indentificarmos que um seletor (nome que se da à um elemento) vem de um atributo class nós aplicamos o caractere ponto “.” à frente do seletor.

.exemplo { propriedade: valor;}

Em outras palavras, quaisquer propriedades que eu  aplicar ao seletor “exemplo” na folha de estilo, irá afetar todas as divs e spans que estão atribuidas há esses elementos.