Neste tutorial, iremos abordar as folhas de estilo em cascata, mais conhecidas como Cascading Style Sheets. Segue abaixo uma referΩncia do que serß abordado neste tutorial:

O uso deste tutorial em outros documentos Θ permitido desde que mantenha o conte·do original e seja exposto claramente a fonte. Qualquer d·vida contate o criador do tutorial pelo e-mail ricardo@iecentral.net .

Tutorial CSS - Parte I

Por que usar CSS?

Todo documento escrito utiliza certos elementos de design para formatar seτ⌡es de texto a fim de manter a mesma aparΩncia, seguir um padrπo. Por exemplo, um elemento de design Heading 1 Θ geralmente alguma fonte grande que identifica todas as principais divis⌡es de t≤picos de um capφtulo, artigo ou pßgina da web. Um elemento de design Heading 2 identifica todos os tφtulos dos subt≤picos. A HTML inclui uma tag para praticamente todos os elementos de design comumente utilizados, incluindo tags de tφtulo (<H1>,<H2>...), lista (a tag <OL> para lista ordenada, a tag <UL> para lista nπo ordenada) e assim por diante.

No passado , a tag <H1> em quase todos os web sites parecia a mesma - texto preto era consideravelmente maior que o corpo do texto normal. Se vocΩ quisesse fazer seus pr≤prios tφtulos diferenciados, tinha de formatar cada tag de tφtulo individualmente, utilizando tags <FONT> ou similares. Se mais tarde mudasse de idΘias sobre a aparΩncia desses tφtulos, tinha de voltar e mudar cada tφtulo individualmente. Ou seja: um processo lento e trabalhoso.

As folhas de estilo em cascata mudam tudo isso. Com uma folha de estilo, vocΩ pode fazer uma "declaraτπo global", como "quero que todos os meus tφtulos <H1> sejam verdes". VocΩ precisa dizer isso somente uma vez e cada tφtulo <H1> em seu site serß verde. Se depois decidir que azul Θ uma cor melhor, nπo Θ preciso voltar e alterar cada tag <H1> para a cor azul. Em vez disso, basta alterar o estilo - a "regra" - para "quero que todos os meus tφtulos <H1> sejam azuis" e pronto!

Obviamente vocΩ nπo estß limitado a tφtulos e nem a cor azul. ╔ possφvel definir um estilo personalizado para cada elemento de design em seu web site, incluindo tφtulos, lista, tabelas e imagens, para citar s≤ alguns. E, alΘm de definir uma cor, vocΩ pode definir a fonte, o tamanho, o alinhamento, a espessura da borda, e assim por diante.

Como criar estilos

Cada estilo que vocΩ cria Θ definido como uma regra CSS. Cada regra deve utilizar a seguinte sintaxe:

elemento {atributo1: valor; atributo2: valor ...}

Explicaτπo desta sintaxe:

Elemento - descreve o elemento de design ao qual o estilo serß aplicado. A mesma tag HTML mas sem os sinais de maior e menor. Essa parte da regra Θ αs vezes chamadas de seletor.

Atributo - o aspecto especφfico do elemento que vocΩ quer usar como estilo. Deve ser um nome de atributo CSS vßlido, como o atributo font-size.

Valor - a configuraτπo aplicada ao atributo. Deve ser uma configuraτπo vßlida para o atributo em questπo , como 20pt (20 pontos) para font-size.

Atributo:valor - a parte declaraτπo da regra. VocΩ pode atribuir m·ltiplas declaraτ⌡es se desejar separß-los com ponto-e-vφrgula (;). Nπo coloque um ponto-e-vφrgula depois da ·ltima declaraτπo.

Agora Θ hora de exemplos. Eis uma regra CSS que especifica que todos os tφtulos de nφvel 1 (tags <H1>) sejam exibidos em uma fonte de 36 pontos:

H1 {font-size: 36pt}

Aqui estß um exemplo de regra que diz que todos os tφtulos de nφvel 2 (tags <H2>) devem ter tamanho de 24 pontos e cor azul;

H2 {font-size: 24pt; color: blue}

VocΩ pode inserir quebras de linha e espaτos em branco dentro da regra como quiser. Assim, Θ possφvel ver mais facilmente todas as declaraτ⌡es e certificar-se de que colocou todos os sinais de ponto-e-vφrgula e colchetes nos lugares corretos. Por exemplo, aqui estß uma regra que diz que os parßgrafos aparecerπo em fonte Times, 12 pontos, azul e recuados meia polegada a partir da margem esquerda da pßgina:

P {font-family: Times;
font-size: 12pt;
color: blue;
margin-left: 0.5in}

Note como Θ fßcil aplicar todas as declaraτ⌡es ao elemento parßgrafo (P) e como cada declaraτπo, exceto a ·ltima, Θ seguida pelo caracter de ponto-e-vφrgula exigido.

As folhas de estilo

VocΩ pode definir regras de CSS em trΩs lugares. E, por definiτπo, pode utilizar uma combinaτπo dos trΩs mΘtodos nos seus web sites. A maneira como as regras interagem entre si estß relacionada α parte "em cascata".Os trΩs lugares sπo: 1) em um documento separado fora de todos os documentos HTML, 2) no cabeτalho de um documento HTML e 3) dentro de uma tag de HTML. Cada um destes mΘtodos tem um nome e afeta as pßginas HTML em seu site de um modo diferente, como discutido aqui:

Externo - Externo significa que vocΩ coloca as regras de CSS em um arquivo separado, e entπo sua pßgina HTML pode fazer um link para esse arquivo. Essa abordagem lhe permite definir regras em um ou mais arquivos que podem ser aplicadas em alguma pßgina do seu web site.

Incorporado - Incorporado significa que vocΩ especifica as regras de CSS no cabeτalho do documento. As regras incorporadas afetam somente a pßgina atual.

Inline - Inline significa que vocΩ especifica as regras de CSS dentro da tag de HTML. Essas regras afetam somente a tag atual.

Estilos externos

Para definir um conjunto de regras de estilo que vocΩ pode facilmente aplicar em alguma pßgina do seu site, Θ preciso colocar as regras em um arquivo de texto. VocΩ pode criar este arquivo com um editor de textos simples, como o Notepad do Windows, e dar ao nome desse arquivo a extensπo .css.

Sempre que quiser utilizar esses estilos em uma nova pßgina, basta colocar uma tag <LINK> no cabeτalho que referencie esse arquivo .css.Veja o exemplo:

Arquivo meu_estilo.css

H1 {font-family: 'Comic Sans MS';
font-size: 36pt;
color: blue}

P {font-family: 'Courier';
margin-left: 0.5in}

Agora, para utilizar os estilos definidos neste arquivo .css vocΩ precisa adicionar a tag a seguir ao cabeτalho da pßgina, onde nome_do_arquivo Θ uma referΩncia absoluta ou relativa ao arquivo .css.

<LINK REL="STYLESHEET" HREF="http://www.iecentral.net/meu_estilo.css" TYPE="text/css">

OBS: VocΩ deve inserir este texto entre as tags <HEAD>...</HEAD> e colocar a localizaτπo correta do seu arquivo e seu nome.

Estilos incorporados

Se quiser criar um conjunto de estilos que se aplicam a uma ·nica pßgina, vocΩ pode configurar os estilos exatamente como fizemos no exemplo dos estilos externos - mas em vez de colocar as tags <STYLE>...</STYLE> e as regras em um arquivo separado, coloque estas tags na pr≤pria pßgina HTML. A estrutura bßsica de uma pßgina da web que utiliza estilos incorporados Θ semelhante ao seguinte c≤digo:

<HTML>
<HEAD>
<TITLE>Exemplo Estilos Incorporados</TITLE>
<STYLE TYPE="text/css"><!--
P {background-color: #FFFFFF;
font-family:'Comic Sans MS';
font-size: 14pt}
--></STYLE>
</HEAD></BODY></HTML>

Estilos inline

Os estilos inline sπo os que tΩm menos efeitos. Eles afetam somente a tag atual - nπo outras tags na pßgina e tampouco outros documentos. A sintaxe para definir um estilo inline Θ a seguinte:

<TAG STYLE="regras css">

Exemplo: <A STYLE="color: green; text-decoration: none" HREF="http://www.iecentral.net">

Note que em vez das tags <STYLE>...</STYLE>, vocΩ apenas utiliza um atributo STYLE dentro da tag para definir o estilo. E, em vez de colocar as regras de CSS entre colchetes, vocΩ as coloca entre aspas, separando-as com ponto-e-vφrgula como de costume.

Parte II