Introdução ao CSS – Parte I

CSS é a abreviatura para Cascading Style Sheet. Ou seja é uma folha de estilos, esta folha de estilos mantém uma colecção de regras onde é definido a estrutura e propriedades das páginas Web.

Embora muitos Web designers considerem o CSS extremamente difícil e não o programem quando desenham os sites, a verdade é que CSS depois de um pouco de estudo é muito fácil de perceber.

O CSS permite-nos definir todos os estilos comuns numa folha de estilos. Embora exista várias formas de implementar o CSS, a forma mais poderosa de empregar as regras do CSS no nosso Web site é a partir de uma folha de estilos externa. Quando utilizado desta forma é possível usar todo o poder do CSS na estrutura e design de um site, poupando imenso trabalho e tornando-se muito fáceis as futuras actualizações na estrutura ou design do site.

Pré-requisitos

Para aprender mais facilmente CSS é importante ter alguns conhecimentos sobre

• HTML / XHTML

Isto não vai servir de muito para aprender CSS, mas vai servir para perceber o que esse CSS faz nos sites.

Criar folhas de estilo em cascata

Um ficheiro de CSS é apenas uma ficheiro de texto com a extensão .css, geralmente é atribuído a estes ficheiros o nome de style.css mas podemos atribuir outro nome qualquer desde que tenha a extensão .css. Este ficheiro pode ser desenvolvido por exemplo no bloco de notas, ou outro editor de texto como o notepad++ (aconselho vivamente).

Existem editores dedicados a CSS, sinceramente nunca testei nenhum porque não é preciso, mas caso os pretenda estudar aqui ficam alguns:

• TopStyle (Windows)
• Jimdo (Linux / Mac)

Neste serie de artigos será usado o notepad. É sem duvida um dos melhores editores de texto, não só para CSS mas para muitas outras linguagens. Como alguns dos objectivos desta serie de artigos passa por perceber a sintaxe do CSS e aprender a criar as suas próprias regras o notepad ajuda imenso.

Evolução do CSS

O nível 1 do CSS (CSS1) tornou-se uma recomendação da W3C em Dezembro de 1996, esta versão descreve a linguagem CSS, assim como um modelo de formatação simples do visual. O CSS2 tornou-se recomendado pela W3C em 1998, baseado no CSS1 e adicionado suporte das folhas de estilo em meios específicos (por exemplo em impressoras), fontes para download e elementos de posicionamento de tabelas.

O CSS3, embora já seja usado por alguns (incluindo eu) ainda esta em desenvolvimento e não é suportado em todos os browsers, mas posso vos dizer que o CSS3 é formidável.

CSS economiza muito trabalho!

Seria insensato, impraticável e provavelmente impossível escrever um artigo que abranja todos os aspectos do CSS. Nos futuros artigos desta serie de artigos sobre CSS veremos mais a fundo esta afirmação. Mas para a justificar de forma muito rápida, imaginemos por exemplo que quer definir nos seus parágrafos uma margem de 10px (entre dois parágrafos), enquanto no ficheiro seu ficheiro CSS só precisa de adicionar o seguinte:

p {margin-bottom:10px;}

Sem um ficheiro CSS sempre que tivesse um parágrafo teria de adicionar o seguinte:

<p style=”margin-bottom:10px;”>texto do parágrafo</p>

No caso de um artigo de 5 000 palavras isto seria uma prática impensável.

Nos futuros artigos, vamos analisar as melhores praticas para programar uma folha de CSS e como a optimizar páginas já programadas.