CSS é a abreviatura de Cascade Styling Sheet, que significa Folha de Estilo em Cascata, e é a linguagem utilizada para controlar a apresentação de elementos em documentos HTML. A apresentação destes é especificada por uma série de regras que podem ser atribuídas em linha através dos atributos do elemento style ou através de regras incluídas dentro das tags <style> </style> na secção head dos documentos HTML, ou através de folhas de estilo externas (Ver Tutorial: Aprender o básico sobre CSS ). Cada regra de estilização selecciona os elementos e depois aplica as regras aos mesmos. O CSS foi criado pelo W3C para recuperar o controlo da markup de documentos à medida que o HTML ia evoluíndo a partir das tags primárias que definiam os elementos estruturais de um documento, como os cabeçalhos, parágrafos, hiperligações e listagens. Neste artigo Programação CSS para iniciantes (Parte II) vamos-lhe mostrar como seleccionar os elementos de um documento HTML para estilizar ao seu gosto.

CSS

1. SELECCIONAR POR TIPO DE ELEMENTO

A parte do selector de uma regra de estilização selecciona elementos num documento HTML para serem estilizados de acordo com os valores especificados no bloco de declarações. Um selector de tipo selecciona todos os elementos numa página que correspondam ao selector. Podem ser seleccionados múltiplos elementos por um selector de tipo que especifique vários tipos de elementos. Vamos praticar:

Crie um documento HTML com um cabeçalho e uma lista não ordenada de hiperligações dentro de uma div:

<body>
<div>
<h1>Cabeçalho</h1>
<ul>
<li><a href="#">Primeiro Link</a></li>
<li><a href="#">Segundo Link</a></li>
<li><a href="#">Terceiro Link</a></li>
</ul>
</div>
</body>

De seguida crie uma folha de estilos e ligue-a ao documento HTML (se não sabe como o fazer veja o artigo Programação CSS para iniciantes (Parte I) ), com a seguinte regra de estilização:
```
div { width: 30% }
```
Insira ainda no ficheiro CSS o seguinte código para alterar o fundo de todas as hiperligações:
```
a {background: red }
```
De seguida crie uma regra de estilização que irá definir a cor de fundo do cabeçalho e da lista:
```
h1, ul {background: green }
```
Guarde os ficheiros e observe o resultado:
O selector universal * pode ser utilizado para seleccionar elementos de todos os tipos dentro de um documento HTML. Insira no seu ficheiro css o seguinte código:
```
* {font-style: italic }
```
Guarde o ficheiro e observe o resultado:
O selector universal * também pode ser utilizado para selecionar elementos de qualquer tipo contidos dentro de um tipo de elemento específico, neste caso uma div:
```
div * {border: 2px solid yellow }
```
Guarde o ficheiro e observe o resultado:

2. SELECCIONAR POR CLASSE

Como alternativa à selecção de elementos por tipo, temos a selecção de elementos por classe, que pode seleccionar elementos HTML que contenham o atributo “class” que tem um valor que corresponde ao selector. O selector de classe inicia com um ponto “.” seguido do valor da class a corresponder. Isto é especialmente útil para aplicar a regra de estilização num número especifico de elementos de diferentes tipos. Adicionalmente um selector de classe pode ser combinado com um selector de tipo para especificar mais o elemento alvo da estilização. Neste caso o selector selecciona primeiro o tipo de elemento, seguido por um ponto “.” e o valor da classe, vamos praticar:

Crie um documento HTML com um parágrafo incluindo duas palavras dentro da tag <span>, no qual todos os elementos têm uma classe em comum:
```
<p class="frame">Este é um <span class="frame">texto</span> sobre a <span class="frame">Escola</span> Criatividade.</p>
```
Crie novamente uma folha de estilos e linke-a ao documento HTML. Insira o seguinte código:
```
.frame {border: 2px solid red}
```
Agora insira uma regra que irá ser superior à criada anteriormente:
```
p.frame {border: 2px solid blue; width: 20%}
```
Guarde os ficheiros e observe o resultado:

3. SELECCIONAR POR IDENTIDADE

Seleccionar por identidade é semelhante a uma classe, um selector ID pode seleccionar elementos HTML que tenham um atributo ID ao qual tenha sido atribuído um valor correspondente ao selector. O selector ID começa com um “#” seguido do valor. Isto é útil para aplicar regras de estilo a um elemento específico, já que cada selector ID terá de ser único no documento HTML. Opcionalmente o selector ID pode ser combinado com um selector de tipo para identificar o tipo do elemento. Praticando:

Crie um documento HTML com um parágrafo com suas palavras com <span> em que cada uma terá um ID único:

<body>
<p id="paragrafo">Este é um <span id="pal1">texto</span> sobre a <span id="pal2">Escola</span> Criatividade.</p>
</body>

Crie um ficheiro de estilos e linke-o ao seu documento. No ficheiro de estilos insira o código:
```
#pal1 {background: red}
#pal2 {background: green }
```
De seguida adicione uma regra de estilização para o resto da frase:
```
p#paragrafo {background: orange; width: 30%}
```
Guarde os ficheiros e observe o resultado:

No próximo artigo iremos continuar a abordar os selectores!

Abraço e até já!

Comentários dos Alunos

Rick
5 de Dezembro de 2011

Muito bom Diogo, assim como a parte 1, a parte 2 está excelente.
Responder
Jose
6 de Dezembro de 2011

Mesmo muito bom. Espero qe seja rapido este tutorial porque me aptece aprender isto tudo agora mesmo.
Cumprimentos e optimos artigos como este e que devem vir
Responder