Introdução às Cascading Style Sheets (CSS)

As CSS ou, em português, folhas de estilo, são um mecanismo simples para estilizar um documento web, trabalhando em conjunto com liguagens de marcação, como o XHTML, com a finalidade de lhes conferir o aspecto por nós desejado.
Neste trabalho conjunto, as linguagens de marcação definem a estrutura geral do documento web no que diz respeito a cabeçalhos, tabelas, formulários, etc., ficando ao cargo das CSS a formatação de detalhes como tipos, tamanhos e cores das letras, fundos do documento entre outras formatações semelhantes.

Basicamente, podemos dizer que são uma lista de regras, para uma página web ou site. Estas regras podem ser aplicadas a páginas inteiras ou apenas a tags específicas. Por exemplo:

<h1 class="centered">Exemplo</h1>
<p>Este é um texto para exemplo</p>

Como é possível visualizar no exemplo, o elemento “h1″ aparece centrado em relação ao ecrã.

Porquê o uso das CSS?

As CSS são o método mais correcto para estilizar conteúdos web pelas seguintes razões:

  • Permitem uma maior precisão em mudanças de formatação, na medida em que podem ser usadas para estilizar documentos ou tags únicas dentro de um documento;
  • Estando as regras de estilo todas definidas num único local, possibilita que alterações efectuadas a este ficheiro afectem todas as páginas onde estas regras são incluídas;
  • Muitos dos elementos tradicionais e atributos do XHTML, especialmente dedicados à formatação dos conteúdos, estão a deixar de ser suportados, ou seja, estão a tornar-se “deprecated”.

Estrutura das CSS

Nas CSS, cada regra é composta por um selector, que indica onde vai ser aplicado o estilo definido pela regra, e por um conjunto de pares propriedade/valor que define o estilo. O formato básico é o seguinte:

selector { propriedade1: valor1; propriedade2: valor2; }

É visível no exemplo acima que o conjunto de pares de propriedades/valores está entre “{” e “}” — chavetas — e que os pares estão separados por ponto-e-vírgula “;”. Cada par propriedade/valor é separado por dois pontos “:”.

h1 { color: #000000; font-size: 105%; }

Neste último exemplo, o selector é o “h1″, que é o elemento XHTML para um cabeçalho de primeiro nível. O primeiro par propriedade/valor confere a cor preta ao cabeçalho (o código hexadecimal #000000 representa a cor preta). O segundo par dá ao cabeçalho um tamanho 5% maior que o tamanho normal para o texto.

Usando DIV e SPAN para aplicar CSS

Dois elementos muito úteis quando se trabalha com CSS são os elementos “div” e “span”, que podem ser vistos como tags “invisíveis”, já que quando usadas por si só têm pouco significado. No entanto, quando combinadas com regras de estilo, podem ser usadas como “contentores” para aplicar estilos.

No caso de querermos realçar uma palavra poderiamos usar o seguinte:

...uma <span class="negrito">palavra</span> poderiamos...

A definição da regra de estilo para este exemplo seria:

.negrito{ font-weight: bold; }

Para aplicar esta mesma regra a uma secção inteira de um documento poderiamos usar o seguinte:

<div class="negrito">
<h1>Exemplo</h1>
<p>Parágrafo 1...</p>
<p>Parágrafo 2...</p>
<p>Parágrafo 3...</p>
</div>

Há que ter em atenção que caso se definam estilos para os elementos “h1″ e “p”, estes irão sobrepor-se ao estilo definido pela regra “negrito”.

Formas de especificar as CSS

Para aplicar uma CSS a um documento XHTML, é necessário especificar as regras de estilo e de alguma forma associá-las ao documento, de forma a que os conteúdos assumam os estilos definidos.

A CSS pode ser especificada de três formas:

  • Style Sheets Externas – Estas regras de estilo são guardadas num documento separado e incluídas no nosso documento XHTML. O código seguinte deve ser colocado entre as tags head:

<link rel="stylesheet" type="text/css" href="style.css" />

  • Style Sheets Internas – Ao contrário das Style Sheets Externas, as internas são definidas no próprio documento, ficando apenas disponíveis nesse documento, sendo por isso impossível serem referenciadas por outros documentos. O código seguinte deve ser colocado entre as tags head:

<style type="text/css">
<!--
.exemplo { width: 90%; background-color: #CCCCCC; }
-->
</style>

  • Inline Styles – As regras são aplicadas directamente a um elemento XHTML. Esta forma de especificar as regras de estilo é a menos eficiente, visto que é impossível reutilizar estas regras como nos dois primeiros casos. Para além disso, esta forma de especificar as regras de estilo torna difícil possíveis alterações futuras ao aspecto geral de um site, já que obriga a verificar cada elemento nos quais são necessárias alterações.

<span style="color: #000000;">texto</span>

Como interagem entre si?

Depois de saber as três formas de aplicar estilos a um documento, é importante saber como é que estas três formas interagem entre si.

As CSS funcionam como uma hierarquia – estilos aplicados de uma forma geral para os aplicados de forma mais específica. Podemos dizer que as regras incluídas num documento afectam todo um documento ou mesmo todo um site (estilos aplicados de uma forma geral), mas que as regras aplicadas directamente num elemento apenas afectam esse elemento (estilos aplicados de uma forma específica).

Assim, se dois estilos podem ser aplicados ao mesmo elemento, é dada prioridade às regras aplicadas de forma específica, ou seja, se de uma forma geral for especificado que o texto de um site será vermelho, mas especificamente for especificado que este será azul, a cor mostrada será o azul.

Paralelamente a isto, existe também a existência de herança entre estilos, ou seja, se de uma forma geral for especificado que o texto de um site será azul, mas se especificamente for especificado que este será negrito, o texto irá ser mostrado com a cor azul e a negrito.

Concluindo…

Entre as diferentes formas de especificar a CSS a usar num site, recomenda-se o uso de style sheets externas. Desta forma conseguem-se centralizar num só local todas as regras de estilo, o que torna muito mais simples eventuais alterações que possam surgir aos estilos do site. Para além disto, estando as regras centralizadas num só local, o carregamento de um site é bastante mais rápido e leve, já que os browsers apenas lêem a CSS na primeira vez que o site é carregado, ficando depois guardada em cache, o que liberta o servidor web de um processamento mais pesado.

Tags: