SELETORES CSS

Seletores HTML - Atributos

Os seletores HTML são utilizados para definir estilos nas tags da linguagem de marcação HTML.

Sintaxe:

[elemento] : { bloco de  declarações}

Exemplo:

body {

color: #000;

background: #fff;

font-weight: bold;

}


h1, h2, h3, h4, h5, h6 {

color: #0f0;

}

p{

font-family: calibri, Tahoma, arial;

color: gainsboro;

size: 12px;

}

Seletores CLASS

Você não está restrito somente aos elementos HTML (tags) para aplicar regras de estilo. Você pode "inventar" um nome e com ele criar uma classe a qual definirá as regras CSS.

Exemplo:

.seletor1 {

font-size: 14px;       

color: #0066FF;

font-family: Arial, Serif;

}

E o mais interessante das classes, é que elas podem ser aplicadas a qualquer elemento HTML. E mais ainda, você pode aplicar estilos diferentes para o mesmo tipo de elemento da HTML, usando classes diferentes para cada um deles.

Exemplo:

p.seletor1 {

font-size: 14px;       

color: #000;

font-family: Arial, Serif;

}

p.seletor2 {

font-size: 12px;       

color: #0ff;

font-family: Verdana, Arial;

}

Utilização:

<p class ="seletor1">

este parágrafo será na cor preta, fonte Arial e tamanho 14px.

</p>

<p class ="seletor2">

este parágrafo será na cor azul, fonte Verdana e tamanho 12px.

</p>

Seletores ID

O seletor ID difere do seletor classe, por ser ÚNICO. Um seletor ID de determinado nome só pode ser aplicado a UM e somente UM elemento HTML dentro do documento.

Você pode "inventar" um nome e com ele criar um ID ao qual definirá as regras CSS. Um determinado ID só pode ser aplicado a UM elemento HTML.

A sintaxe para o seletor ID é mostrada a seguir. Um nome qualquer que você "inventa" precedido do sinal # ("tralha" ou "jogo-da-velha"):

Exemplo:

#meuID {

propriedade: valor;

}

#banner{

width:100%;

height:250px;

}