ndice

Introduo ..................................................................................................................................... 4 Lio 1: O que CSS? .................................................................................................................... 5 O que posso fazer com CSS? ..................................................................................................... 5 Qual a diferena entre CSS e HTML? ...................................................................................... 5 Quais so os benefcios do uso de CSS? .................................................................................... 6 Lio 2: Como funciona o CSS? ..................................................................................................... 6 A sintaxe bsica das CSS ............................................................................................................ 6 Aplicando o CSS a um documento HTML .................................................................................. 7 Mtodo 1: In-line (o atributo style)....................................................................................... 7 Mtodo 2: Interno (a tag style) ............................................................................................. 7 Mtodo 3: Externo (link para uma folha de estilos).............................................................. 8 Faa voc mesmo ...................................................................................................................... 9 default.htm............................................................................................................................ 9 style.css ................................................................................................................................. 9 Lio 3: Cores e fundos ............................................................................................................... 10 Cor do primeiro plano: a propriedade 'color' ......................................................................... 10 A propriedade 'background-color' .......................................................................................... 10 Imagens de fundo [background-image] .................................................................................. 11 Imagem de fundo repetida [background-repeat] ................................................................... 12 Imagem de fundo fixa [background-attachment] ................................................................... 12 Posio da imagem de fundo [background-position] ............................................................. 13 Compilando [background] ....................................................................................................... 15 Lio 4: Fontes............................................................................................................................. 16 Famlia de fontes [font-family] ................................................................................................ 16 Estilo da fonte [font-style] ...................................................................................................... 17 Fonte variante [font-variant] .................................................................................................. 18 Peso da fonte [font-weight] .................................................................................................... 18 Tamanho da fonte [font-size].................................................................................................. 18 Compilando [font] ................................................................................................................... 20 Lio 5: Textos ............................................................................................................................. 21 Indentao de texto [text-indent] ........................................................................................... 21 Alinhamento de textos [text-align] ......................................................................................... 21 Decorao de textos [text-decoration] ................................................................................... 22 Pgina | 2

Espaamento entre caracteres [letter-spacing] ...................................................................... 22 Transformao de textos [text-transform] ............................................................................. 22 Lio 6: Links ............................................................................................................................... 24 O que uma pseudo-classe?................................................................................................... 24 Pseudo-classe: link .............................................................................................................. 25 Pseudo-classe: visited ......................................................................................................... 25 Pseudo-classe: active .......................................................................................................... 25 Pseudo-classe: hover ........................................................................................................... 25 Exemplo 1: Efeito quando o ponteiro est sobre o link .......................................................... 26 Exemplo 1a: Espaamento entre as letras .......................................................................... 26 Exemplo 1b: UPPERCASE e lowercase ................................................................................. 26 Exemplo 2: Removendo sublinhado dos links ......................................................................... 26 Lio 7: Identificar e agrupar elementos (class e id) ................................................................... 28 Agrupando elementos com uso de classe ............................................................................... 28 Identificando um elemento com uso de id ............................................................................. 29 Lio 8: Agrupar elementos (span e div) ..................................................................................... 31 Agrupar com <span> ............................................................................................................... 31 Agrupar com <div> .................................................................................................................. 32

Pgina | 3

Introduo
Folhas de estilos em cascata Cascading Style Sheets (CSS) uma ferramenta fantstica para construo do layout dos seus websites. Permite que projecte websites com uma tcnica completamente diferente da convencional e possibilita uma considervel reduo de tempo de trabalho. Conhecer CSS uma necessidade para qualquer um envolvido com o projecto Web.

Este tutorial inici-lo- nas CSS em algumas horas. fcil de entender e ensinar-lhe- todas as tcnicas sofisticadas.

Aprender CSS divertido. medida que progredir no tutorial no esquea de dedicar algum tempo para fazer exerccios com o que for aprendendo em cada captulo.

Para usar CSS necessrio um conhecimento bsico de HTML. Se voc no est familiarizado com HTML, faa-o antes de iniciar o trabalho com o CSS.

Que software necessrio? Por favor, evite usar software tal como FrontPage, DreamWeaver ou Word para acompanhar este tutorial. Softwares avanados no facilitaro a aprendizagem de CSS. Ao contrrio, colocar-lhe-o limites e atrasaro a sua aprendizagem. Tudo o que precisa de um simples e gratuito editor de texto.

Por exemplo, o Microsoft Windows vem com um programa chamado Notepad. Normalmente este programa est no directrio Acessrios no menu Iniciar => Programas. Em alternativa, pode usar um editor de texto similar, tal como, Pico para Linux ou Simple Text para Macintosh.

Um editor de texto simples o ideal para a aprendizagem de HTML e de CSS porque eles no afectam nem modificam o cdigo que insere. Assim os acertos e erros de codificao devem-se exclusivamente a si no ao software que utiliza. Pode usar qualquer navegador para acompanhar este tutorial. Ns aconselhamos que mantenha o seu navegador sempre actualizado e utilize a ltima verso disponvel. Um navegador e um editor de textos simples tudo o que voc precisa. Vamos comear!

Pgina | 4

Lio 1: O que CSS?

Talvez j tenha ouvido falar em CSS, mas no saiba o que significa exactamente. CSS a abreviatura para Cascading Style Sheets. Folha de Estilos em Cascata

O que posso fazer com CSS?

CSS uma linguagem para estilos que define o layout de documentos HTML. Por exemplo, CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos e muito mais. Aguarde e ver! O HTML pode ser (in)devidamente usado para definir o layout de websites. Contudo o CSS proporciona mais opes e mais preciso e sofisticado. O CSS suportado por todos os navegadores actuais. Depois de estudar algumas lies deste tutorial, estar em condies de projectar uma folha de estilos, utilizando CSS para dar um grande visual ao seu website.

Qual a diferena entre CSS e HTML?

O HTML usado para estruturar contedos. O CSS usado para formatar contedos estruturados. OK, isto soa um tanto tcnico e confuso. Mas, por favor continue a leitura. Tudo far sentido em breve. Em tempos passados quando a Madonna era virgem e um sujeito chamado Tim Berners Lee inventou a World Wide Web, a linguagem HTML era usada apenas para estruturar textos. Um autor podia marcar os seus textos definindo "isto um cabealho " ou "isto um pargrafo" utilizando tags HTML tais como <h1> e <p>. medida que a Web ganhava popularidade, os designers comeavam a sentir a necessidade de encontrar meios de construir layouts para os documentos online. Para suprir estas necessidades os fabricantes de navegadores (quela poca a Netscape e a Microsoft) inventaram novas tags HTML tais como, por exemplo a tag <font> que se diferenciava das tags originais do HTML pelo facto de destinar-se layout e no estrutura. Isto adicionalmente teve o efeito de desvirtuar o emprego de tags inicialmente projectadas para estrutura, como por exemplo a tag <table>, que passaram a ser empregues para layout. Muitas destas novas tags para layout como a tag <blink> eram suportadas apenas por um determinado tipo de navegador. A frase "Precisa do navegador X para visualizar esta pgina" tornou-se comum nos websites. O CSS foi inventado para solucionar esta situao, colocando disposio dos web designers meios sofisticados de projectar layouts suportados por todos os
Pgina | 5

navegadores. E ao mesmo tempo a separao dos estilos de apresentao da marcao dos contedos torna a manuteno dos sites bem mais fcil.

Quais so os benefcios do uso de CSS?

O CSS uma revoluo no mundo do web design. Os benefcios concretos do uso de CSS incluem:
Controlo do layout de vrios documentos a partir de uma simples folha de estilos; Maior preciso no controlo do layout; Aplicao de diferentes layouts para servir diferentes meios (ecr, impressora, etc.); Emprego de variadas, sofisticadas e avanadas tcnicas de desenvolvimento.

Lio 2: Como funciona o CSS?

Nesta lio aprender a desenvolver a sua primeira folha de estilos. Ver o bsico sobre o modelo CSS e que cdigo necessrio para usar CSS num documento HTML. Muitas das propriedades usadas em Cascading Style Sheets (CSS) so semelhantes quelas do HTML. Assim, se est habituado a usar HTML para layout ir reconhecer muitos dos cdigos que utilizamos. Vamos ver um exemplo concreto.

A sintaxe bsica das CSS

Suponha que desejamos uma cor de fundo vermelha para a pgina web: Usando HTML podemos fazer assim:
<body bgcolor="#FF0000">

Com CSS o mesmo resultado ser obtido assim:

body {background-color: #FF0000;}

Como pode ver os cdigos HTML e CSS so mais ou menos parecidos. O exemplo acima serve tambm para demonstrar o fundamento do modelo CSS:

Pgina | 6

Mas, onde colocar o cdigo CSS? o que veremos em seguida.

Aplicando o CSS a um documento HTML

Pode aplicar CSS a um documento de trs maneiras distintas. Os trs mtodos de aplicao esto exemplificados a seguir. Recomendamos que prefira o terceiro mtodo, ou seja, o mtodo externo.
Mtodo 1: In-line (o atributo style)

Uma maneira de aplicar CSS pelo uso do atributo style do HTML. Tomando como base o exemplo mostrado anteriormente a cor vermelha para o fundo da pgina pode ser aplicada conforme mostrado a seguir:
<html> <head> <title>Exemplo</title> </head> <body style="background-color: #FF0000;"> <p>Esta uma pgina com fundo vermelho</p> </body> </html>

Mtodo 2: Interno (a tag style)

Uma outra maneira de aplicar CSS pelo uso da tag <style> do HTML:
<html> <head> <title>Exemplo</title> <style type="text/css"> body {background-color: #FF0000;} </style> </head> <body> <p>Esta uma pgina com fundo vermelho</p> </body> </html>

Pgina | 7

Mtodo 3: Externo (link para uma folha de estilos)

O mtodo recomendado o de apontar para uma folha de estilos externa. Usaremos este mtodo nos exemplos deste tutorial. Uma folha de estilos externa um simples ficheiro de texto com a extenso .css. Tal como com qualquer outro tipo de ficheiro pode colocar uma folha de estilos tanto no servidor como no disco rgido. Vamos supor, por exemplo, que a sua folha de estilos tem o nome style.css e est localizada no directrio style. Tal situao est mostrada a seguir:

O "truque" criar um link no documento HTML (default.htm) para a folha de estilos (style.css). O link criado numa simples linha de cdigo HTML comi se v a seguir:
<link rel="stylesheet" type="text/css" href="style/style.css" />

Note que o caminho para a folha de estilos indicado no atributo href. Esta linha de cdigo deve ser inserida na seco header do documento HTML, isto , entre as tags <head> e </head>. Conforme mostrado abaixo:
<html> <head> <title>Meu documento</title> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head> <body> ...

Esta hiperligao comanda o navegador a usar o ficheiro CSS na renderizao e apresentao do layout do documento HTML. A coisa realmente inteligente disto que vrios documentos HTML podem apontar para uma mesma folha de estilos. Em outras palavras isto significa que um simples ficheiro ser capaz de controlar a apresentao de muitos documentos HTML.

Pgina | 8

Esta tcnica pode economizar uma grande quantidade de trabalho. Se por exemplo, voc quiser trocar a cor do fundo de um site com 100 pginas, a folha de estilos evita que voc edite manualmente uma a uma as pginas para fazer a mudana nos 100 documentos HTML. Usando CSS a mudana se far em uns poucos segundos trocandose a cor em uma folha de estilos central. Vamos praticar o que aprendemos.

Faa voc mesmo

Abra o Notepad (ou qualquer outro editor de texto que queira usar) e crie dois ficheiros um ficheiro HTML e um ficheiro CSS com os seguintes contedos:
default.htm
<html> <head> <title>Meu documento</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>A minha primeira folha de estilos</h1> </body> </html>

style.css
body { background-color: #FF0000; }

Guarde os dois ficheiros no mesmo directrio. Lembre-se de guardar os ficheiros com a extenso apropriada (".css" e ".htm")
Pgina | 9

Abra o ficheiro default.htm no seu navegador e veja uma pgina com o fundo vermelho. Parabns! Construiu sua primeira folha de estilos!

Lio 3: Cores e fundos

Nesta lio ir aprender a aplicar cores de primeiro plano e cores de fundo no seu website. Abordaremos ainda os mtodos avanados de controlo e posicionamento de imagens de fundo. Sero explicadas as seguintes propriedades CSS:
color background-color background-image background-repeat background-attachment background-position background

Cor do primeiro plano: a propriedade 'color'

A propriedade color define a cor do primeiro plano de um elemento. Considere, por exemplo, que desejamos que todos os cabealhos de primeiro nvel no documento sejam na cor vermelha. O elemento HTML que marca tais cabealhos o elemento <h1>. O cdigo a seguir define todos os <h1> na cor vermelha.
h1 { color: #ff0000; }

As cores podem ser definidas pelo seu valor hexadecimal como no exemplo acima (#ff0000), com uso do nome da cor ("red") ou ainda pelo seu valor rgb (rgb(255,0,0)).

A propriedade 'background-color'
A propriedade background-color define a cor do fundo de um elemento. O elemento <body> contm todo o contedo de um documento HTML. Assim, para mudar a cor de fundo da pgina, devemos aplicar a propriedade background-color ao elemento <body>. Pode aplicar cores de fundo para outros elementos, inclusive para cabealhos e textos. No exemplo abaixo foram aplicadas diferentes cores de fundo para os elementos <body> e <h1>.

Pgina | 10

body { background-color: #FFCC66; } h1 { color: #990000; background-color: #FC9804; }

Note que foram aplicadas duas propriedades ao elemento <h1> separadas por um ponto e vrgula.

Imagens de fundo [background-image]

A propriedade CSS background-image usada para definir uma imagem de fundo. Usaremos a imagem de uma borboleta para exemplificar a aplicao de imagens de fundo. Pode fazer o download da imagem (http://www.html.net/butterfly.gif) mostrada abaixo e us-la nos seus exerccios, ou poder usar uma outra imagem qualquer ao seu gosto.

Para inserir uma imagem de fundo na pgina basta aplicar a propriedade backgroundimage ao elemento <body> e especificar o caminho para onde est gravada a imagem.
body { background-color: #FFCC66; background-image: url("butterfly.gif"); } h1 { color: #990000; background-color: #FC9804; }

Pgina | 11

Note como foi especificado o caminho para a imagem usando url("butterfly.gif"). Isto significa que a imagem est localizada no mesmo directrio da folha de estilos. Pode ser escolhido um outro directrio para gravar as imagens e o caminho seria url("../images/butterfly.gif") ou at mesmo hosped-la na Internet: url("http://www.html.net/butterfly.gif").

Imagem de fundo repetida [background-repeat]

No exemplo anterior observou que a imagem da borboleta repetiu tanto na vertical como na horizontal cobrindo todo o ecr? A propriedade background-repeat controla o comportamento de repetio da imagem de fundo. A tabela a seguir mostra os diferentes valores para background-repeat.
Valor
Background-repeat: repeat-x background-repeat: repeat-y

Descrio A imagem repete-se na horizontal A imagem repete-se na vertical A imagem repete-se na tanto na horizontal como na vertical A imagem no se repete

background-repeat: repeat

background-repeat: no-repeat

Por exemplo, o cdigo mostrado a seguir para que a imagem no se repita no ecr:
body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; } h1 { color: #990000; background-color: #FC9804; }

Imagem de fundo fixa [background-attachment]

A propriedade background-attachment define se a imagem ser fixa ou se ir rolar juntamente com o elemento que a contm. Uma imagem de fundo fixa permanece no mesmo lugar e no rola com o ecr ao contrrio da imagem que no fixa e rola acompanhando o contedo do ecr.

Pgina | 12

A tabela a seguir mostra os diferentes valores para background-attachment. Veja os exemplos para constatar a diferena entre imagem fixa e imagem que rola.
Valor Descrio

Background-attachment: scroll A imagem rola com a pgina Background-attachment: fixed

A imagem fixa

Por exemplo, o cdigo abaixo fixa a imagem no ecr.

body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; } h1 { color: #990000; background-color: #FC9804; }

Posio da imagem de fundo [background-position]

Por norma uma imagem de fundo posicionada no canto superior esquerdo do ecr. A propriedade background-position permite alterar este posicionamento padro e colocar a imagem em qualquer lugar do ecr. Existem vrias maneiras de definir o posicionamento da imagem no ecr, indicando valores para background-position. Todas elas utilizam um sistema de coordenadas. Por exemplo, os valores '100px 200px' posicionam a imagem a 100px do topo e a 200px do lado esquerdo da janela do navegador. As coordenadas podem ser expressas em percentagem da largura da janela, em unidades fixas (pixis, centmetros, etc.) ou pode-se usar as palavras top, bottom, center, left e right. A figura a seguir ilustra o modelo de coordenadas:

Pgina | 13

Na tabela a seguir so mostrados alguns exemplos .

Valor
background-position: 2cm 2cm background-position: 50% 25% background-position: top right

Descrio A imagem posicionada a 2 cm da esquerda e 2 cm para baixo na pgina A imagem centrada na horizontal e a um quarto (25%) para baixo na pgina A imagem posicionada no canto superior direito da pgina

No exemplo de cdigo a seguir a imagem posicionada no canto inferior direito da pgina:

body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; } h1 { color: #990000; background-color: #FC9804; }

Pgina | 14

Compilando [background]
A propriedade background uma abreviao para todas as propriedades listadas anteriormente. Com background declara vrias propriedades de modo abreviado, economizando digitao e alguns bits, alm de tornar a folha de estilo mais fcil de se ler e entender. Por exemplo, observe as cinco linhas a seguir:
background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom;

Se utilizar o background consegue o mesmo resultado, abreviando da seguinte forma:

background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;

A declarao abreviada deve seguir a seguinte ordem:

[background-color] | [background-image] | [background-repeat] [background-attachment] | [background-position]

Se uma das propriedades no for declarada ela assume automaticamente o seu valor por defeito. Por exemplo, a propriedade background-attachment e backgroundposition no foram declaradas no cdigo mostrado a seguir:
background: #FFCC66 url("butterfly.gif") no-repeat;

As duas propriedades no declaradas assumiro o valor por defeito, que como j sabe so: a imagem rola no ecr e ser posicionada no canto superior esquerdo (que so os valores por defeito para as propriedades no declaradas).

Pgina | 15

Lio 4: Fontes
Nesta lio estudaremos as fontes e como aplic-las usando CSS. Veremos como criar situaes para que determinada fonte seja visualizada pelo utilizador mesmo no estando instalada em seu sistema operacional. Descreveremos as seguintes propriedades CSS:
font-family font-style font-variant font-weight font-size font

Famlia de fontes [font-family]

A propriedade font-family usada para definir uma lista de fontes e sua prioridade para apresentao de um elemento em uma pgina. Se a primeira fonte da lista no estiver instalada na mquina do utilizador, dever ser usada a segunda e assim por diante at ser encontrada uma fonte instalada. Existem dois tipos de nomes para definir fontes: nomes para famlias de fontes e nomes para famlias genricas. Os dois so explicados a seguir:

Nome para famlias de fontes Exemplos para este tipo (normalmente conhecidas como "font") so "Arial", "Times New Roman" ou "Tahoma".

Nome para famlias genricas Famlias genricas so fontes que pertencem a um grupo com aparncia uniforme. Um exemplo as fontes sans-serif que englobam a coleco de fontes que "no tm p".

Pode ver as diferenas na figura a seguir:

Pgina | 16

Ao listar fontes para o seu website, comece com aquela preferida, seguindo-se algumas alternativas para a mesma. recomendvel encerrar a listagem das fontes com uma fonte genrica. Assim, em ltimo caso a pgina ser renderizada com fonte da mesma famlia das que foram especificadas quando todas as demais estiverem indisponveis na mquina do utilizador. A seguir mostramos um exemplo de listagem de fontes:
h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif;}

Cabealhos <h1> sero renderizados com fonte "Arial". Se o utilizador no tiver a font Arial instalada, ser usada a fonte "Verdana". Se ambas estiverem indisponveis na mquina do utilizador ser usada uma fonte da famlia sans-serif. Note que para especificar a fonte "Times New Roman" foram usadas aspas. Isto necessrio para fontes com nomes compostos e que contenham espaos entre os nomes.

Estilo da fonte [font-style]

A propriedade font-style define a escolha da fonte em normal, italic ou oblique. No exemplo a seguir todos os cabealhos <h2> sero em itlico.
h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif; font-style: italic;}

Pgina | 17

Fonte variante [font-variant]

A propriedade font-variant usada para escolher as variantes normal ou small-caps. Uma fonte small-caps aquela que usa letras maisculas de tamanhos reduzidos. Confundiu? D uma olhada nos exemplos a seguir:

Se a propriedade font-variant for definida para small-caps e no estiver disponvel na mquina do utilizador, ser usada a fonte em maisculas.
h1 {font-variant: small-caps;} h2 {font-variant: normal;}

Peso da fonte [font-weight]

A propriedade font-weight define o quo negrito ou "pesada" deve ser renderizada a fonte. Uma fonte pode ser normal ou bold. Alguns navegadores suportam nmeros de 100-900 (em intervalos de 100 em 100) para definir o peso da fonte.
p {font-family: arial, verdana, sans-serif;} td {font-family: arial, verdana, sans-serif; font-weight: bold;}

Tamanho da fonte [font-size]

O tamanho da fonte definido pela propriedade font-size. Existem muitas unidades (p. ex.:. pixis e percentagens) que podem ser usadas para definir o tamanho da fonte. Neste tutorial utilizaremos as unidades mais comuns e apropriadas. Veja exemplos a seguir:
h1 {font-size: 30px;} h2 {font-size: 12pt;} h3 {font-size: 120%;} p {font-size: 1em;}

Existe uma diferena fundamental entre as quatro unidades adoptadas no exemplo acima. As unidades 'px' e 'pt' so absolutas, enquanto '%' e 'em' permitem ao utilizador ajustar o tamanho das fontes ao seu gosto e necessidade. Muitos
Pgina | 18

utilizadores tm restries, como por exemplo, pessoas idosas, pessoas com viso limitada ou as que usam um monitor de baixa qualidade. Para tornar o seu site acessvel a todos, voc dever usar unidades como '%' ou 'em'. Abaixo pode ver como ajustar o tamanho das fontes nos navegadores Mozilla Firefox e Internet Explorer uma excelente funcionalidade do navegador, no mesmo?

Pgina | 19

Compilando [font]
Usar font uma abreviao que permite definir vrias propriedades numa s. Veja a seguir quatro linhas de cdigo usadas para definir propriedades de fonte para um pargrafo <p>:
p { font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; }

Usar a abreviao simplifica o cdigo como mostrado abaixo:

p { font: italic bold 30px arial, sans-serif; }

A ordem dos valores para font a mostrada a seguir :

font-style | font-variant | font-weight | font-size | font-family

Pgina | 20

Lio 5: Textos
Formatar e estilizar textos um item chave para qualquer web designer. Nesta lio ir conhecer as interessantes oportunidades que as CSS proporcionam para adicionar layout aos textos. Sero discutidas as propriedades listadas abaixo:
text-indent text-align text-decoration letter-spacing text-transform

Indentao de texto [text-indent]

A propriedade text-indent permite que aplique um recuo primeira linha de um pargrafo. No exemplo a seguir um recuo de 30px aplicado a todos os textos marcados com <p>:
p { text-indent: 30px; }

Alinhamento de textos [text-align]

A propriedade text-align corresponde ao atributo align das antigas verses do HTML. Textos podem ser alinhados esquerda (left), direita (right) ou centrados (center). E temos ainda o valor justify que faz com o texto contido numa linha se estenda tocando as margens esquerda e direita. Este tipo de alinhamento usado em jornais e revistas. No exemplo a seguir o texto contido na clula de cabealho <th> alinhado direita e os contidos nas clulas de dados <td> so centrados. E, os textos normais em pargrafos so justificados:
th { text-align: right; } td { text-align: center; } p { text-align: justify; }

Pgina | 21

Decorao de textos [text-decoration]

A propriedade text-decoration possibilita adicionar "efeitos" ou "decorao" em textos. Pode, por exemplo, sublinhar textos, cortar o texto com uma linha, colocar uma linha sobre o texto, etc. No exemplo a seguir os cabealhos <h1> so sublinhados, os cabealhos <h2> levam uma linha em cima e os cabealhos <h3> so cortados por uma linha.
h1 { text-decoration: underline; } h2 { text-decoration: overline; } h3 { text-decoration: line-through; }

Espaamento entre caracteres [letter-spacing]

O espaamento entre os caracteres de um texto controlado pela propriedade letterspacing. O valor desta propriedade define o espao entre os caracteres. Por exemplo, se deseja um espao de 3px entre as letras do texto de um pargrafo <p> e de 6px entre as letras do texto de um cabealho <h1> o cdigo a seguir dever ser usado:
h1 { letter-spacing: 6px; } p { letter-spacing: 3px; }

Transformao de textos [text-transform]

A propriedade text-transform controla a capitalizao (tornar maiscula) do texto. Pode escolher capitalize, uppercase ou lowercase independentemente de como o texto foi escrito no cdigo HTML. Como exemplo tomamos a palavra "cabealho" que pode ser apresentada ao utilizador como "CABEALHO" ou "Cabealho". So quatro os valores possveis para texttransform:
capitalize

Pgina | 22

Capitaliza a primeira letra de cada palavra. Por exemplo: "john doe" transforma-se em "John Doe". uppercase Converte todas as letras para maiscula. Por exemplo: "john doe" transforma-se em "JOHN DOE". lowercase Converte todas as letras para minscula. Por exemplo: "JOHN DOE" transforma-se em "john doe". none Sem transformaes - o texto apresentado como foi escrito no cdigo HTML.

Para exemplificar vamos usar uma lista de nomes. Os nomes esto marcados com o elemento <li> (item de lista). Vamos supor que desejamos os nomes capitalizados e os cabealhos em letras maisculas. Ao consultar o exemplo sugerido para este cdigo repare no HTML da pgina e observe que os textos no cdigo foram escritos com todas as letras em minsculas.
h1 { text-transform: uppercase; } li { text-transform: capitalize; }

Pgina | 23

Lio 6: Links
Pode aplicar aos links tudo que aprendeu nas lies anteriores (i.e. mudar cores, fontes, sublinhados, etc). A novidade aqui que pode definir as propriedades de maneira diferenciada de acordo com o estado do link, ou seja, visitado, no visitado, activo ou com o ponteiro do rato sobre o link. Isto permite adicionar efeitos interessantes ao seu website. Para estilizar estes efeitos ir utilizar as chamadas pseudo-classes.

O que uma pseudo-classe?

Uma pseudo-classe permite definir estilos, tendo em conta condies diferentes ou eventos ao definir uma propriedade de estilo para uma tag HTML. Vamos ver um exemplo. Como j sabe, links so marcados no HTML com tags <a>. Podemos ento usar a como um selector CSS:
a { color: blue; }

Um link pode ter diferentes estados. Por exemplo, pode ter sido visitado ou no visitado. Ir ento utilizar pseudo-classes para definir o estilo para links visitados e no visitados.
a:link { color: blue; } a:visited { color: red; }

Utilize as pseudo-classes a:link e a:visited para criar estilos para links no visitados e visitados, respectivamente. Links activos so estilizados com a pseudo-classe a:active e a:hover, esta ltima a pseudo-classe para links com o ponteiro do rato sobre ele. A seguir iremos ver com mais detalhes e exemplos, as quatro pseudo-classes.

Pgina | 24

Pseudo-classe: link

A pseudo-classe :link usada para links no visitados. No exemplo a seguir links no visitados sero na cor verde.
a:link { color: green; }

Pseudo-classe: visited

A pseudo-classe :visited usada para links visitados. No exemplo a seguir links visitados sero na cor amarela:
a:visited { color: yellow; }

Pseudo-classe: active

A pseudo-classe :active usada para links ativos. No exemplo a seguir links activos surgiro com a cor de fundo vermelha:
a:active { background-color: red; }

Pseudo-classe: hover

A pseudo-classe :hover usada para quando o ponteiro do rato est sobre o link. Isto pode ser usado para conseguir efeitos bem interessantes. Por exemplo, podemos mudar a cor do link para laranja e o texto para itlico quando o ponteiro do rato passa sobre ele, o cdigo CSS para estes efeitos o mostrado a seguir:
a:hover { color: orange; font-style: italic; }

Pgina | 25

Exemplo 1: Efeito quando o ponteiro est sobre o link

comum a criao de efeitos diferentes quando o ponteiro est sobre o link. Veremos a seguir alguns exemplos extras de estilizao da pseudo-classe :hover.
Exemplo 1a: Espaamento entre as letras

Como deve estar lembrado da Lio 5, o espaamento entre as letras de um texto pode ser controlado pela propriedade letter-spacing. Isto pode ser aplicado aos links para obter um efeito interessante:
a:hover { letter-spacing: 10px; font-weight:bold; color:red; }

Exemplo 1b: UPPERCASE e lowercase

Na mesma lio, vimos a propriedade text-transform, para criar estilos com letras maisculas e minsculas. Isto pode ser utilizado para definir o estilo dos links:
a:hover { text-transform: uppercase; font-weight:bold; color:blue; background-color:yellow; }

Os exemplos mostrados do uma ideia das inmeras possibilidades de combinao de diferentes propriedades. Voc pode criar seus prprios efeitos experimente!

Exemplo 2: Removendo sublinhado dos links

Uma pergunta comum: Como remover o sublinhado dos links? NOTA: Deve estudar com muito cuidado a necessidade de retirar o sublinhado dos links, pois isto poder reduzir significativamente a usabilidade do website. As pessoas esto habituadas a ver os links na cor azul e sublinhados e sabem que ali h um texto a ser clicado. Se voc mudar a cor e retirar o sublinhado dos links, poder confundir os visitantes e em consequncia no retirar o mximo dos contedos do seu website. Feita esta ressalva, muito fcil retirar o sublinhado dos links. Conforme explicado na Lio 5, a propriedade text-decoration pode ser usada para definir se o texto ou
Pgina | 26

no sublinhado. Para remover o sublinhado, basta definir o valor none para a propriedade text-decoration.
a { text-decoration:none; }

Em alternativa, pode definir text-decoration juntamente com outras propriedades para as quatro pseudo-classes.
a:link { color: blue; text-decoration:none; } a:visited { color: purple; text-decoration:none; } a:active { background-color: yellow; text-decoration:none; } a:hover { color:red; text-decoration:none; }

Pgina | 27

Lio 7: Identificar e agrupar elementos (class e id)

Em alguns casos pode querer aplicar estilos a um elemento ou grupo de elementos em particular. Nesta lio iremos utilizar class e id para criar os estilos para os elementos. Como definir uma cor para um determinado cabealho, diferente da cor usada para os demais cabealhos do website? Como agrupar links em diferentes categorias e estilizar cada categoria diferentemente? Estas so algumas das questes que iremos responder nesta lio.

Agrupando elementos com uso de classe

Vamos supor que temos duas listas de links para diferentes tipos de uvas usadas na produo de vinho branco e de vinho tinto. O cdigo HTML conforme mostrado abaixo:
<p>Uvas para vinho branco:</p> <ul> <li><a href="ri.htm">Riesling</a></li> <li><a href="ch.htm">Chardonnay</a></li> <li><a href="pb.htm">Pinot Blanc</a></li> </ul> <p>Uvas para vinho tinto:</p> <ul> <li><a href="cs.htm">Cabernet Sauvignon</a></li> <li><a href="me.htm">Merlot</a></li> <li><a href="pn.htm">Pinot Noir</a></li> </ul>

Queremos que os links para vinho branco sejam na cor amarela, para vinho tinto na cor vermelha e os demais links na pgina permaneam na cor azul. Para conseguir isto, dividimos os links em duas categorias. Isto feito atribuindo uma classe para cada link, usando o atributo class. Vamos especificar esta classe no exemplo a seguir:
<p>Uvas para vinho branco:</p> <ul> <li><a href="ri.htm" class="whitewine">Riesling</a></li> <li><a href="ch.htm" class="whitewine">Chardonnay</a></li> <li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li> </ul> <p>Uvas para vinho tinto:</p> <ul> <li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li> <li><a href="me.htm" class="redwine">Merlot</a></li>

Pgina | 28

<li><a href="pn.htm" class="redwine">Pinot Noir</a></li> </ul>

Agora podemos definir propriedades especficas para links pertencentes as classes whitewine e redwine, respectivamente.
a { color: blue; } a.whitewine { color: #FFBB00; } a.redwine { color: #800000; }

Como se v no exemplo acima, pode-se definir as propriedades para a criao dos elementos pertencentes a uma determinada classe, atravs de um .nomedaclasse na folha de estilos do documento.

Identificando um elemento com uso de id

Alm de agrupar elementos podemos querer atribuir identificao a um nico elemento. Isto conseguido atravs o atributo id. O que h de especial no atributo id que no podero existir dois ou mais elementos com a mesma id, ou seja num documento apenas um e somente um elemento poder ter uma determinada id. Cada id nica. Para os casos em que haja necessidade de mais de um elemento com a mesma identificao usamos o atributo class. A seguir um exemplo de possvel uso de id:
<h1>Captulo ... <h2>Captulo ... <h2>Captulo ... <h1>Captulo ... <h2>Captulo ... <h3>Captulo ... 1</h1> 1.1</h2> 1.2</h2> 2</h1> 2.1</h2> 2.1.2</h3>

Pgina | 29

O exemplo acima simula os cabealhos de um documento estruturado em captulos e pargrafos. comum atribuir uma id para cada captulo, como se pode ver no exemplo a seguir:
<h1 ... <h2 ... <h2 ... <h1 ... <h2 ... <h3 ... id="c1">Captulo 1</h1> id="c1-1">Captulo 1.1</h2> id="c1-2">Captulo 1.2</h2> id="c2">Captulo 2</h1> id="c2-1">Captulo 2.1</h2> id="c2-1-2">Captulo 2.1.2</h3>

Vamos supor que o cabealho do captulo 1.2 deva ser na cor vermelha. Isto pode ser feito conforme no exemplo a seguir:
#c1-2 { color: red; }

Como se pode ver no exemplo acima, possvel definir propriedades para um elemento especfico usando um selector #id na folha de estilos para o documento.

Pgina | 30

Lio 8: Agrupar elementos (span e div)

Os elementos <span> e <div> so usados para agrupar e estruturar um documento e so freqentemente usados em conjunto com os atributos class e id. Nesta lio veremos com detalhes o uso dos elementos HTML <span> e <div> no que se refere a sua vital importncia para as CSS.

Agrupar com <span>

O elemento <span> um elemento neutro e que no adiciona qualquer tipo de semntica ao documento. Contudo, <span> pode ser usado pelas CSS para adicionar efeitos visuais a partes especficas do texto no documento. Um exemplo desta utilizao mostrado na citao abaixo da autoria de Benjamin Franklin:
<p>Dormir cedo e acordar cedo faz o homem saudvel, rico e sbio.</p>

Vamos supor que queremos enfatizar na cor vermelha os benefcios apontados por Mr. Franklin pelo facto de no se passar o dia a dormir. Para isto marcamos os benefcios com <span>. A cada span atribumos uma class, e definimos o estilo na folha de estilos:
<p>Dormir cedo e acordar cedo faz o homem <span class="benefit">saudvel</span>, <span class="benefit">rico</span> e <span class="benefit">sbio</span>.</p>

A folha de estilos:
span.benefit { color:red; }

claro que pode usar id para estilizar o elemento <span>. Mas, como deve estar lembrado, dever usar uma nica id para cada um dos trs elementos <span>, conforme foi explicado na lio anterior.

Pgina | 31

Agrupar com <div>

Enquanto <span> utilizado dentro de um elemento nvel de bloco como vimos no exemplo anterior, <div> usado para agrupar um ou mais elementos nvel de bloco. Diferenas parte, o agrupamento com <div> funciona mais ou menos da mesma maneira. Vamos ver um exemplo que usa duas listas de presidentes dos Estados Unidos agrupados segundo suas filiaes polticas:
<div id="democrats"> <ul> <li>Franklin D. Roosevelt</li> <li>Harry S. Truman</li> <li>John F. Kennedy</li> <li>Lyndon B. Johnson</li> <li>Jimmy Carter</li> <li>Bill Clinton</li> </ul> </div> <div id="republicans"> <ul> <li>Dwight D. Eisenhower</li> <li>Richard Nixon</li> <li>Gerald Ford</li> <li>Ronald Reagan</li> <li>George Bush</li> <li>George W. Bush</li> </ul> </div>

E na folha de estilos, podemos agrupar a estilizao da mesma maneira como fizemos no exemplo acima:
#democrats { background:blue; } #republicans { background:red; }

Nos exemplos mostrados acima usamos apenas <div> e <span> para simples estilizaes, tais como cores de textos e de fundos. Contudo estes dois elementos possibilitam estilizaes bem mais avanadas como veremos adiante.

Pgina | 32