Apostila CSS

CSS Cascading Style Sheets
Introduo
Folhas de estilos em cascata Cascading Style Sheets (CSS) uma ferramenta fantstica para
construo do layout dos seus websites. Permite que voc projete 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 projeto web.
Para usar CSS necessrio um conhecimento bsico de HTML.
Quais softwares eu precisarei?
Por favor, evite usar softwares tais como FrontPage, DreamWeaver ou Word para acompanhar
esta apostila. Softwares avanados no facilitaro seu aprendizado de CSS. Ao contrrio, eles colocaro limites
para voc e atrasaro seu aprendizado. Tudo o que voc precisa de um simples e gratuito editor de texto.
Por exemplo, Microsoft Windows vem com um programa chamado Bloco de Notas. Normalmente
este programa est no diretrio Acessrios no menu Iniciar => Programas. Alternativamente voc 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 o aprendizado de HTML e de CSS porque eles no
afetam e nem modificam o cdigo que voc digita. Assim os acertos e erros de codificao devem-se
exclusivamente a voc no ao software que voc utiliza.
Voc pode usar qualquer navegador para acompanhar esta apostila. Deve-se manter seu navegador
sempre atualizado e utilize a ltima verso disponvel. Um navegador e um editor de textos simples tudo o
que voc precisa.
- 1 -
Parte 1: O que CSS?
CSS a abreviatura para Cascading Style Sheets - Folha de Estilos em Cascata. E 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.
HTML pode ser devidamente usado para definir o layout de websites. Contudo CSS proporciona
mais opes e mais preciso e sofisticado. CSS suportado por todos os navegadores atuais.
Qual a diferena entre CSS e HTML?
HTML usado para estruturar contedos. CSS usado para formatar contedos estruturados.
Em tempos passados quando um sujeito chamado Tim Berners Lee inventou a World Wide Web, a
linguagem HTML era usada somente para estruturar textos. Um autor podia marcar seus textos definindo
isto um cabealho ou isto um pargrafo usando 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 layout 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 fato de destinar-se layout e
no estrutura.
Isto adicionalmente teve o efeito de desvirtuar o emprego de tags inicialmente projetadas para
estrutura como, por exemplo, a tag <table> que passaram a ser empregadas para layout. Muitas destas novas
tags para layout como a tag <blink> eram suportadas somente por um determinado tipo de navegador. A
frase "Voc precisa do navegador X para visualizar esta pgina" tornou-se comum nos websites.
CSS foi inventada para solucionar esta situao, colocando disposio dos web designers meios
sofisticados de projetar layouts suportados por todos os 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?
CSS uma revoluo no mundo do web design. Os benefcios concretos do uso de CSS incluem:
Controle do layout de vrios documentos a partir de uma simples folha de estilos;
Maior preciso no controle do layout;
Aplicao de diferentes layouts para servir diferentes mdias (tela, impressora, etc.);
Emprego de variadas, sofisticadas e avanadas tcnicas de desenvolvimento.
- 2 -
Parte 2: Como funciona CSS?
Muitas das propriedades usadas em Cascading Style Sheets (CSS) so semelhantes quelas do
HTML. Assim, se voc est acostumado a usar HTML para layout ir reconhecer muitos dos cdigos que
usaremos. Vamos dar uma olhada em um exemplo concreto.
A sintaxe bsica das CSS
A sintaxe das definies CSS composta por duas partes: um seletor e uma declarao. Vejamos um
exemplo:

Neste exemplo o seletor H1 diz que o estilo se aplica a elementos <h1> e a definio diz que a cor
do texto destes elementos deve ser verde ("green"). A declarao fica entre chaves ({...}) e pode conter vrias
definies. Cada definio formada por um par de propriedade: valor, em que o valor separado da
propriedade pelo caractere : (dois pontos). O exemplo seguinte ilustra isto de forma genrica:

sel et or { pr opr i edade: val or }
Exemplo:
H1 { background-color: green }
Aplicando CSS a um documento HTML
Voc pode aplicar CSS a um documento de trs maneiras distintas. Os trs mtodos de aplicao
esto exemplificados a seguir. Recomendamos que voc use 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 verde para o fundo da pgina pode ser aplicada conforme mostrado a
seguir:
<ht ml >
<head>
<t i t l e>Exempl o</ t i t l e>
</ head>
<body style="background-color: green;">

<p>Est a uma pgi na comf undo ver de</ p>
</ body>
</ ht ml >
- 3 -
Mtodo 2: Interno (a tag style)
Outra maneira de aplicar CSS e pelo uso da tag <style> do HTML.
<ht ml >
<head>
<t i t l e>Exempl o</ t i t l e>
<style type="text/css">

body {background-color: green;}
</style>
</ head>
<body>
<p>Est a uma pgi na comf undo ver de</ p>

</ body>
</ ht ml >
Mtodo 3: Externo (link para uma folha de estilos)
O mtodo recomendado o de linkar para uma folha de estilos externa. Usaremos este mtodo nos
exemplos desta apostila.
Uma folha de estilos externa um simples arquivo de texto com a extenso .css. Tal como com
qualquer outro tipo de arquivo voc pode colocar uma folha de estilos tanto no servidor como no disco rgido.
Vamos supor, por exemplo, que sua folha de estilos tenha sido nomeada de style.css e est
localizada no diretrio 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 em uma simples linha de cdigo HTML como mostrado a seguir:
<l i nk r el =" st yl esheet " t ype=" t ext / css" href="style/style.css" / >

Notar que o caminho para a folha de estilos indicado no atributo href.
Esta linha de cdigo deve ser inserida na seo header do documento HTML, isto , entre as tags
<head>e </ head>:

- 4 -
<ht ml >
<head>
<t i t l e>Meu document o</ t i t l e>
<link rel="stylesheet" type="text/css" href="style/style.css" />

</ head>
<body>
. . .
Este link informa ao navegador para usar o arquivo CSS na renderizao e apresentao do layout
do documento HTML.
A coisa realmente inteligente disto que vrios documentos HTML podem linkar para uma mesma
folha de estilos. Em outras palavras isto significa que um simples arquivo ser capaz de controlar a
apresentao de muitos documentos HTML.

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 trocando-se a cor em uma folha de estilos central.
Faa voc mesmo
Abra o editor de texto que queira usar e crie dois arquivos um arquivo HTML e um arquivo
CSS com os seguintes contedos:
default.htm

<ht ml >
<head>
<t i t l e>Meu document o</ t i t l e>
<link rel="stylesheet" type="text/css" href="style.css" />

</ head>
<body>
<h1>Mi nha pr i mei r a f ol ha de est i l os</ h1>
</ body>
</ ht ml >
- 5 -
style.css
body {
backgr ound- col or : #FF0000;
}
Salve os dois arquivos no mesmo diretrio. Lembre-se de salvar os arquivos com a extenso
apropriada (".css" e ".htm")
Abra default.htm no seu navegador e veja uma pgina com o fundo vermelho. Parabns! Voc
construiu sua primeira folha de estilos!
- 6 -
Parte 3: Cores e fundos
Vamos aprender as cores de primeiro plano e cores de fundo no seu website. Abordaremos ainda os
mtodos avanados de controle 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.
<ht ml >
<head>
<t i t l e>Exer c ci o 1</ t i t l e>
<style type="text/css">
h1 {
color: #ff0000;
}
</style>
</ head>
<body>
<h1>Mi nha pr i mei r a f ol ha de est i l os</ h1>
CSS a abr evi at ur a par a Cascadi ng St yl e Sheet s - Fol ha de Est i l os
emCascat a.
E uma l i nguagempar a est i l os que def i ne o l ayout de document os HTML.
Por exempl o, CSS cont r ol a f ont es, cor es, mar gens, l i nhas, al t ur as,
l ar gur as, i magens de f undo, posi ci onament os e mui t o mai s.

HTML pode ser devi dament e usado par a def i ni r o l ayout de websi t es.
Cont udo CSS pr opor ci ona mai s opes e mai s pr eci so e sof i st i cado. CSS
supor t ado por t odos os navegador es at uai s.
</ body>
</ ht ml >
- 7 -

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 backgr ound- col or 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 backgr ound- col or ao elemento <body>.
Voc 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>.
body {
backgr ound- col or : #FFCC66;
}

h1 {
col or : #990000;
backgr ound- col or : #FC9804;
}

- 8 -
Notar que foram aplicadas duas propriedades ao elemento <h1>separadas por um ponto e vrgula.
Images de fundo [background-image]
A propriedade CSS backgr ound- i mage usada para definir uma imagem de fundo.
Usaremos a imagem de uma borboleta para exemplificar a aplicao de imagens de fundo. Voc
pode fazer o download da imagem mostrada abaixo e us-la nos seus experimentos (clique com o boto direito
do mouse sobre a imagem e escolha "salvar imagem como") ou voc poder usar outra imagem qualquer ao
seu gosto.

Para inserir uma imagem de fundo na pgina basta aplicar a propriedade backgr ound- i mage ao
elemento <body>e especificar o caminho para onde est gravada a imagem.

body {
backgr ound- col or : #FFCC66;
background-image: url("borboleta.jpg");
}

h1 {
col or : #990000;
}

- 9 -
OBS: Notar como foi especificado o caminho para a imagem usando url("borboleta.jpg"). Isto
significa que a imagem est localizada no mesmo diretrio da folha de estilos. Pode ser escolhido outro
diretrio para gravar as imagens e o caminho seria url("../images/borboleta.jpg") ou at mesmo hosped-la
na Internet: url("http://www.html.net/borboleta.jpg").
Imagem de fundo repetida [background-repeat]
No exemplo anterior voc observou que a imagem da borboleta repetiu tanto na vertical como na
horizontal cobrindo toda a tela? A propriedade backgr ound- r epeat controla o comportamento de
repetio da imagem de fundo.
A tabela a seguir mostra os quatro diferentes valores para backgr ound- r epeat .
Valor Descrio
Backgr ound- r epeat : r epeat - x A imagem se repete na horizontal
backgr ound- r epeat : r epeat - y A imagem se repete na vertical
backgr ound- r epeat : r epeat
A imagem se repete na tanto na
horizontal como na vertical
backgr ound- r epeat : no- r epeat A imagem no se repete
Por exemplo, o cdigo mostrado a seguir para que a imagem no se repita na tela:
body {
backgr ound- col or : whi t e;
et a. j pg" ) ; backgr ound- i mage: ur l ( " bor bol
background-repeat: no-repeat;
}

h1 {
col or : #990000;
}

- 10 -
Image de fundo fixa [background-attachment]
A propriedade backgr ound- at t achment 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 a tela ao contrrio da
imagem que no fixa e rola acompanhando o contedo da tela.
A tabela a seguir mostra os quatro diferentes valores para backgr ound- at t achment . Veja os
exemplos para constatar a diferena entre imagem fixa e imagem que rola.
Valor Descrio
Backgr ound- at t achment : scr ol l A imagem rola com a pgina
Backgr ound- at t achment : f i xed A imagem fixa
Por exemplo, o cdigo abaixo fixa a imagem na tela.
body {
backgr ound- i mage: ur l ( " bor bol et a. j pg" ) ;
backgr ound- r epeat : no- r epeat ;
background-attachment: fixed;
}

h1 {
col or : #990000;
}

Posio da imagem de fundo [background-position]
Por padro uma imagem de fundo posicionada no canto superior esquerdo da tela. A propriedade
backgr ound- posi t i on permite alterar este posicionamento padro e colocar a imagem em qualquer
lugar na tela.
- 11 -
Existem vrias maneiras de definir o posicionamento da imagem na tela definindo valores para
backgr ound- posi t i on. Todas elas se utilizam de 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
(pixels, centmetros, etc.) ou pode-se usar as palavras top, bottom, center, left e right. A figura a seguir ilustra
o modelo de coordenadas:

Na tabela a seguir so mostrados alguns exemplos .
Valor Descrio
backgr ound- posi t i on: 2cm2cm
A imagem posicionada a 2 cm da esquerda e 2 cm para
baixo na pgina
backgr ound- posi t i on: 50%25%
A imagem centrada na horizontal e a um quarto (25%) para
baixo na pgina
backgr ound- posi t i on: t op r i ght 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 {
backgr ound- at t achment : f i xed;
background-position: right bottom;
}

h1 {
col or : #990000;
}
- 12 -

Compilando [background]
A propriedade backgr ound uma abreviao para todas as propriedades listadas anteriormente.
Com backgr ound voc declara vrias propriedades de modo abreviado, economizando digitao
e alguns bites, alm de tornar a folha de estilo mais fcil de ler e entender.
Por exemplo, observe as cinco linhas a seguir:
backgr ound- col or : #whi t e;
backgr ound- at t achment : f i xed;
backgr ound- posi t i on: r i ght bot t om;

Usando backgr ound voc consegue o mesmo resultado, abreviando como mostrado abaixo:

backgr ound: whi t e ur l ( " bor bol et a. j pg" ) no- r epeat f i xed r i ght bot t om;

A declarao abreviada deve seguir a seguinte ordem:
[ backgr ound- col or ] | [ backgr ound- i mage] | [ backgr ound- r epeat ] | [ backgr ound- at t achment ] | [ backgr ound- posi t i on]
Se uma das propriedades no for declarada ela assume automaticamente o seu valor default. Por
exemplo, a propriedade backgr ound- at t achment e backgr ound- posi t i on no foram declaradas no
cdigo mostrado a seguir:

backgr ound: whi t e ur l ( " bor bol et a. j pg" ) no- r epeat ;

As duas propriedades no declaradas assumiro o valor default que como voc j sabe so: a
imagem rola na tela e ser posicionada no canto superior esquerdo (que so os valores default para as
propriedades no declaradas).
- 13 -
Parte 4: Fontes
Veremos como criar situaes para que determinada fonte seja visualizada pelo usurio mesmo no
estando instalada em seu sistema operacional. Descreveremos as seguintes propriedades CSS:
f ont - f ami l y
f ont - st yl e
f ont - var i ant
f ont - wei ght
f ont - si ze
f ont
Famlia de fontes [font-family]
A propriedade f ont - f ami l y 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
usurio, 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 so as
fontes sans-serif que englobam a coleo de fontes que "no tm p".
A diferena est mostrada na figura a seguir:

- 14 -
Ao listar fontes para seu website, comece com aquela preferida, seguindo-se algumas alternativas
para ela. recomendvel encerrar a listagem das fontes com uma fonte genrica. Assim fazendo, 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 usurio.
A seguir mostramos um exemplo de listagem de fontes:

h1 {f ont - f ami l y: ar i al , ver dana, sans- ser i f ; }
h2 {f ont - f ami l y: " Ti mes New Roman" , ser i f ; }

Cabealhos <h1> sero renderizados com fonte "Arial". Se o usurio no tiver a font Arial
instalada, ser usada a fonte "Verdana". Se ambas estiverem indisponveis na mquina do usurio ser usada
uma fonte da famlia sans-serif.
Notar 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 f ont - st yl e define a escolha da fonte em normal, italico ou obliquo. No
exemplo a seguir todos os cabealhos <h2>sero em itlico.

h1 {f ont - f ami l y: ar i al , ver dana, sans- ser i f ; }
h2 {f ont - f ami l y: " Ti mes New Roman" , ser i f ; font-style: italic;}
- 15 -

Fonte variante [font-variant]
A propriedade f ont - var i ant usada para escolher as variantes normal ou small-caps. Uma
fonte small-caps aquela que usa letras maisculas de tamanhos reduzidos. D uma olhada nos exemplos a
seguir:

Se a propriedade f ont - var i ant for definida para small-caps e no estiver disponvel na
mquina do usurio, ser usada fonte em maiscula.

h1 {f ont - var i ant : smal l - caps; }
h2 {f ont - var i ant : nor mal ; }

- 16 -
Peso da fonte [font-weight]
A propriedade f ont - wei ght define como dever ser a fonte. Uma fonte pode ser normal ou
negrito. Alguns navegadores suportam nmeros de 100-900 (em intervalos de 100 em 100) para definir o
peso da fonte.

p {f ont - f ami l y: ar i al , ver dana, sans- ser i f ; }
t d {f ont - f ami l y: ar i al , ver dana, sans- ser i f ; font-weight: bold;}

Tamanho da fonte [font-size]
O tamanho da fonte definido pela propriedade f ont - si ze.
Existem muitas unidades (ex.:. pixels e porcentagens) que podem ser usadas para definir o tamanho
da fonte. Nesta apostila ns usaremos as unidades mais comuns e apropriadas. Vejam os exemplos a seguir:

h1 {f ont - si ze: 30px; }
h2 {f ont - si ze: 12pt; }
h3 {f ont - si ze: 120%; }
p {f ont - si ze: 1em;}
- 17 -

Existe uma diferena fundamental entre as quatro unidades adotadas no exemplo acima. As
unidades 'px' e 'pt' so absolutas, enquanto '%' e 'em' permitem ao usurio ajustar o tamanho das fontes ao seu
gosto e necessidade. Muitos usurios tm restries, como por exemplo, pessoas idosas, pessoas com viso
limitada ou as que usam um monitor de baixa qualidade. Para fazer seu site acessvel a todos, voc dever
usar unidades como '%' ou 'em'.
Abaixo uma figura mostrando como ajustar o tamanho das fontes nos navegadores Mozilla Firefox
e Internet Explorer.

Internet
Explorer

Mozilla
Firefox

- 18 -
Compilando [font]
Usar f ont uma abreviao que permite definir vrias propriedades em uma 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 f ont a mostrada a seguir:
f ont - st yl e | f ont - var i ant | f ont - wei ght | f ont - si ze | f ont - f ami l y
- 19 -
Parte 5: Textos
Formatar e estilizar texto so um item chave para qualquer web designer. Agora voc ser
apresentado s 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 voc 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;
}

Ver exemplo

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 (centred). E temos ainda o valor justify
que faz com o texto contido em uma 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;
- 20 -
}

td {
text-align: center;
}

p {
text-align: justify;
}

Ver exemplo

Decorao de textos [text-decoration]
A propriedade text-decoration possibilita adicionar "efeitos" ou "decorao" em textos. Voc 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 um 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;
}

Ver exemplo

- 21 -

Espao entre letras [letter-spacing]
O espaamento entre os caracteres de um texto controlado pela propriedade letter-spacing. O valor
desta propriedade define o espao entre os caracteres. Por exemplo, se voc 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 {
}

Ver exemplo

Transformao de textos [text-transform]
A propriedade text-transform controla a capitalizao (tornar maiscula) do texto. Voc pode
escolher capitalize, uppercase ou lowercase independentemente de como o texto foi escrito no cdigo
HTML.
- 22 -
Como exemplo tomamos a palavra "cabealho" que pode ser apresentada ao usurio como
"CABEALHO" ou "Cabealho". So quatro os valores possveis para text-transform:
capitalize
Capitaliza a primeira letra de cada palavra. Por exemplo: "john doe" transforma-se para "John Doe".
uppercase
Converte todas as letras para maiscula. Por exemplo: "john doe" transforma-se para"JOHN DOE".
lowercase
Converte todas as letras para minscula. Por exemplo: "JOHN DOE" transforma-se para"john doe".
none
Sem trasformaes - 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 d uma olhada 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;
}

- 23 -
Parte 6: Links
Definir as propriedades de maneira diferenciada de acordo com o estado do link ou seja visitado,
no visitado, ativo ou com o ponteiro do mouse sobre o link. Isto possibilita adicionar interessantes efeitos ao
seu website. Para estilizar estes efeitos voc usar as chamadas pseudo-classes.
O que pseudo-classe?
Uma pseudo-classe permite estilizar levando em conta condies diferentes ou eventos ao definir
uma propriedade de estilo para uma tag HTML.
Vamos ver um exemplo. Como voc j sabe, links so marcados no HTML com tags <a>. Podemos
ento usar a como um seletor CSS:

a {
color: blue;
}

Um link pode ter diferentes estados. Por exemplo, pode ter sido visitado ou no visitado. Voc
usar pseudo-classes para estilizar links visitados e no visitados.

a:link {
color: blue;
}

a:visited {
color: red;
}

Use as pseudo-classes a:link e a:visited para estilizar links no visitados e visitados respectivamente.
Links ativos so estilizados com a pseudo-classe a:active e a:hover, esta ltima a pseudo-classe para links com o
ponteiro do mouse sobre ele.
A seguir: as quatro pseudo-classes.
Pseudo-classe: link
A pseudo-classe :link usada para links no visitados.
No exemplo a seguir links no vistados sero na cor verde.

a:link {
color: green;
}

Ver exemplo

- 24 -

Pseudo-classe: visited
A pseudo-clases :visited usada para links visitados. No exemplo a seguir links visitados sero na
cor amarela:

a:visited {
color: yellow;
}

Ver exemplo

Pseudo-classe: active
A pseudo-classe :active usada para links ativos.
No exemplo a seguir links ativos tero seu fundo na cor vermelha:

a:active {
background-color: red;
}

- 25 -
Ver exemplo

Pseudo-classe: hover
A pseudo-classe :hover usada para quando o ponteiro do mouse 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 mouse passa sobre ele, o cdigo CSS para estes
efeitos o mostrado a seguir:

a:hover {
color: orange;
font-style: italic;
}

Ver exemplo

Exemplo 1: Efeito quando o ponteiro est sobre o link
comum a criao de efeitos diferentes quando o ponteiro est sobre o link. A seguir, alguns
exemplos extras de estilizao da pseudo-classe :hover.
- 26 -
Exemplo 1a: Espaamento entre as letras
Como voc 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 {
font-weight:bold;
color:red;
}

Ver exemplo

Exemplo 1b: UPPERCASE e lowercase
Na Parte 5 vimos a propriedade text-transform, para estilizar com letras maisculas e minsculas.
Isto pode ser usado para estilizar links:

a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}

Ver exemplo

- 27 -

Os exemplos mostrados do uma idia das inmeras possibilidades de combinao de diferentes
propriedades. Voc pode criar seus prprios efeitos faa uma tentativa!
Exemplo 2: Removendo sublinhado dos links
Uma pergunta comum: Como remover o sublinhado dos links?
Voc deve estudar com muito cuidado a necessidade de retirar o sublinhado dos links, pois
isto poder reduzir signifcativamente a usabilidade do website. As pessoas esto acostumadas com 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 seus visitantes e em conseqncia no retirar o mximo dos contedos do seu
website.
Feita esta ressalva, muito fcil retirar o sublinhado dos links. Conforme explicado na Parte 5, a
propriedade text-decoration pode ser usada para definir se o texto ou no sublinhado. Para remover o
sublinhado, basta definir o valor none para a propriedade text-decoration.

a {
text-decoration:none;

}

Alternativamante, voc pode definir text-decoration juntamente com outras propriedades para as
quatro pseudo-classes.

a:link {
color: blue;

}

a:visited {
color: purple;
}

a:active {
background-color: yellow;
- 28 -
}

a:hover {
color:red;
}

Ver exemplo

- 29 -
Parte 7: Identificando e agrupando elementos (classes e id)
Em alguns casos voc deseja aplicar estilos a um elemento ou grupo de elementos em particular.
Nesta parte, veremos como usar class e id para estilizar 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?
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>

Ver exemplo

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:
- 30 -

<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>
<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;
}

Ver exemplo

Como mostrado no exemplo acima, pode-se definir propriedades para estilizao dos elementos
pertencentes a uma determinada classe usando 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 feito
usando o atributo id.
- 31 -
O que h de especial no atributo id que no poder existir dois ou mais elementos com a mesma id,
ou seja em um documento apenas um e somente um elemento poder ter uma determinada id. Cada id nica.
Para 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 1</h1>
...
<h2>Captulo 1.1</h2>
...
...
<h1>Captulo 2</h1>
...
...
<h3>Captulo 2.1.2</h3>
...

O exemplo acima simula os cabealhos de um documento estruturado em captulos e pargrafos.
comum atribuir uma id para cada captulo como mostrado a seguir:

<h1 id="c1">Captulo 1</h1>
...
<h2 id="c1-1">Captulo 1.1</h2>
...
<h2 id="c1-2">Captulo 1.2</h2>
...
<h1 id="c2">Captulo 2</h1>
...
<h2 id="c2-1">CCaptulo 2.1</h2>
...
<h3 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
mostrado na folha de estilo a seguir:

#c1-2 {
color: red;
}

Ver exemplo
- 32 -

Como mostrado no exemplo acima, podemos definir propriedades para um elemento especfico
usando um seletor #id na folha de estilos para o documento.
- 33 -
Parte 8: Agrupando 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.
Agrupando com <span>
Agrupando com<div>
Agrupando 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 seu documento.
Um exemplo deste uso mostrado na citao abaixo de 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 fato de no se passar o dia dormindo. Para isto marcamos os benefcios com <span>. A cada span
atribumos uma class, e estilizamos 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;
}

Ver exemplo
- 34 -

claro que voc pode usar id para estilizar o elemento <span>. Mas, como voc deve estar
lembrado, dever usar uma nica id para cada um os trs elementos <span>, conforme foi explicado na lio
anterior.
Agrupando com <div>
Enquanto <span> usado 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 tomando 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;
- 35 -
}

#republicans {
background:red;
}

Ver exemplo

Nos exemplos mostrados acima usamos somente <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 nesta apostila.
- 36 -
Parte 9: O box model
O box model (modelo das caixas) em CSS, descreve os boxes (as caixas) geradas pelos elementos
HTML. O box model, detalha ainda, as opes de ajuste de margens, bordas, padding e contedo para cada
elemento. Abaixo apresentamos um diagrama representando a estrutura de construo do box model:

O box model em CSS

A ilustrao acima terica. Vamos explic-la na prtica tomando como base um cabealho e um
texto. O HTML para nosso exemplo o mostrado abaixo:
<h1>Article 1:</h1>

<p>All human beings are born free
and equal in dignity and rights.
They are endowed with reason and conscience
and should act towards one another in a
spirit of brotherhood</p>

Definindo estilos para cores e fontes o exemplo pode ser apresentado como a seguir:

- 37 -
O exemplo contm dois elementos: <h1> e <p>. O box model para os dois elementos mostrado a
seguir:

Embora possa parecer um pouco complicado, a ilustrao mostra como cada um dos elementos
contido em um box (uma caixa). Boxe que podem ser ajustados e controlados via CSS.
- 38 -
Parte 10: Margin e padding
Veremos como controlar a apresentao de um elemento definindo as propriedades margin e padding.
Definindo margin de um elemento
Um elemento tem quatro lados: right, left, top e bottom (direito, esquerdo, superior e inferior). A
margin a distncia entre os lados de elementos vizinhos (ou s bordas do documento). Vamos comear com
um exemplo mostrando como definir margins para o documento, ou seja, para o elemento <body>. A ilustrao
a seguir mostra como sero as margens da pgina.

As CSS so mostradas abaixo:

body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}

Ou, adotando uma sintaxe mais elegante:

body {
margin: 100px 40px 10px 70px;
}

Ver exemplo
- 39 -

As margens para a maioria dos elementos pode ser definida conforme o exemplo acima. Podemos
ento, por exemplo, definir margens para todos os pargrafos <p>:

body {
}

p {
}

Ver exemplo

Definindo padding de um elemento
Padding pode tambm ser entendido como "enchimento". Isto faz sentido, porque padding no
computado na distncia entre elementos, padding define simplesmente a distncia entre a borda e o contedo
do elemento.
Ilustramos o uso de padding atravs de um exemplo onde todos os cabealhos tm uma cor de
fundo definida:
- 40 -

h1 {
background: yellow;
}

h2 {
background: orange;
}

Ver exemplo

Definindo padding para os cabealhos, alteramos a quantidade de enchimento existente ao redor de
cada um deles:

h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}

h2 {
background: orange;
padding-left:120px;
}

Ver exemplo
- 41 -

- 42 -
Parte 11: Bordas
Bordas podem ser usadas para muitas coisas, por exemplo, como elemento decorativo ou para
servir de linha de separao entre duas coisas. CSS proporciona infinitas possibilidades de uso de bordas na
pgina.
border-width
border-color
border-style
Exemplos de definio de bordas
border
A espessura das bordas [border-width]
A espessura das bordas definida pela propriedade border-width, que pode assumir os valores thin,
medium, e thick (fina, mdia e grossa), ou um valor numrico em pixels. A figura a seguir ilustra algumas
espessuras de bordas:

As cores das bordas [border-color]

A propriedade border-color define as cores para as bordas. Os valores so expressos em cdigo ou
nome de cores, por exemplo, "#123456", "rgb(123,123,123)" ou"yellow" .
Tipos de bordas[border-style]
Existem vrios tipos de bordas disponveis para escolha. A seguir apresentamos 8 tipos diferentes
de bordas e como elas so renderizadas Internet Explorer. Todos os exemplos so mostrados na cor "gold" e
com espessura "thick", mas voc pode usar qualquer cor e espessura ao seu gosto.
Os valores none ou hidden podem ser usados quando no se deseja a existncia de bordas.
- 43 -

Exemplos de definio de bordas
As trs propriedades explicadas acima podem ser definidas juntas para cada elemento e resultam
em diferentes bordas. Para exemplificar, foram estilizadas diferentes bordas para os elementos <h1>, <h2>,
<ul> e <p>. O resultado pode no ser uma obra prima, mas, ilustra bem algumas das inmeras possibilidades
de estilizao de bordas:

h1 {
border-width: thick;
border-style: dotted;
border-color: gold;
}

h2 {
border-width: 20px;
border-style: outset;
border-color: red;
}

p {
border-width: 1px;
border-style: dashed;
border-color: blue;
}

ul {
border-width: thin;
border-style: solid;
border-color: orange;
}

- 44 -
Ver exemplo

possvel ainda definir propriedades especialmente para as bordas top, bottom, right ou left
(superior, inferior, direita e esquerda). Veja o exemplo a seguir:

h1 {
border-top-width: thick;
border-top-style: solid;
border-top-color: red;

border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: blue;

border-right-width: thick;
border-right-style: solid;
border-right-color: green;

border-left-width: thick;
border-left-style: solid;
border-left-color: orange;
}

Ver exemplo
- 45 -

Compilando [border]
Assim como para muitas outras propriedades, voc pode usar uma declarao abreviada para
bordas. Vamos a um exemplo:

p {
border-width: 1px;
border-style: solid;
border-color: blue;
}

Pode ser abreviada assim:

p {
border: 1px solid blue;
}

- 46 -
Parte 12: Altura e largura
At agora ainda no fizemos qualquer considerao sobre as dimenses dos elementos com que
trabalhamos. Nesta parte veremos como fcil atribuir uma altura e uma largura para um elemento.
width
height
Atribuindo largura [width]
A propriedade width destina-se a definir a largura de um elemento.
O exemplo a seguir constri um box dentro do qual podemos digitar um texto:

div.box {
width: 200px;
border: 1px solid black;
background: orange;
}
Ver exemplo

Atribuindo altura [height]
No exemplo acima a altura ser determinada pelo contedo inserido no box. Voc pode definir a
altura de um elemento com a propriedade height. Como exemplo, vamos fazer a altura do box anterior igual a
500px:

div.box {
height: 500px;
width: 200px;
border: 1px solid black;
background: orange;
}
- 47 -
Ver exemplo

- 48 -
Parte 13: Flutuando elementos (floats)
Um elemento pode ser 'flutuado' esquerda ou direita com uso da propriedade float. Isto significa
que o box e seu contedo so deslocados para a direita ou para a esquerda do documento. A figura a seguir
ilustra o princpio de float:

Se desejamos que um texto seja posicionado em volta de uma figura como mostrado abaixo, basta
flutuarmos a imagem:

Como isto feito ?
O HTML para o exemplo acima mostrado a seguir:
<div id="picture">
<img src="bill.jpg" alt="Bill Gates">
</div>

<p>causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</p>
Para conseguir o efeito mostrado, basta definir uma largura para o box que o contm e declarar para ele float:
left;
- 49 -
#picture {
float:left;
width: 100px;
}
Ver exemplo
Outro exemplo: colunas
Floats podem ser usados para construir colunas em um documento. Para criar as colunas
estruturamos as colunas no cdigo HTML usando <div> como mostrado a seguir:

<div id="column1">
<p>Haec disserens qua de re agatur
et in quo causa consistat non videt...</p>
</div>

<div id="column2">
<p>causas naturales et antecedentes,
</div>

<div id="column3">
<p>nam nihil esset in nostra
potestate si res ita se haberet...</p>
</div>

A seguir definimos a largura de cada coluna, por exemplo 33%, e declaramos float: left; para cada
uma das colunas:
#column1 {
float:left;
width: 33%;
}

#column2 {
float:left;
width: 33%;
}

#column3 {
float:left;
width: 33%;
}
Ver exemplo
- 50 -

float pode ser declarado left, right ou none.
A propriedade clear
A propriedade clear usada para controlar o comportamento dos elementos que se seguem aos
elementos floats no documento.
Por padro, o elemento subsequente a um float, ocupa o espao livre ao lado do elemento flutuado.
Veja no exemplo acima que o texto deslocou-se automaticamente para o lado da foto de Bill Gates.
A propriedade clear pode assumir os valores left, right, both ou none. A regra geral : se clear, for
por exemplo definido both para um box, a margem superior deste box ser posicionada sempre abaixo da
margem inferior dos boxes flutuados que estejam antes dele no cdigo.

<div id="picture">
<img src="bill.jpg" alt="Bill Gates">
</div>

<h1>Bill Gates</h1>

<p class="floatstop">causas naturales et antecedentes,

Para evitar que o texto se posicione no espao livre deixado pela foto do Bill Gates basta adicionar
a seguinte regra CSS:

#picture {
float:left;
width: 100px;
}

.floatstop {
clear:both;
}

Ver exemplo
- 51 -

- 52 -
Lio 14: Posicionando elementos
Com posicionamento CSS podemos colocar um elemento em uma posio exata na pgina.
Combinado com floats, o posicionamento abre muitas possibilidades para criao de layouts precisos e
avanados.
O princpio de posicionamento CSS
Considere a janela do navegador como um sistema de coordenadas:

O princpio de posicionamento CSS estabelece que voc possa posicionar um elemento em qualquer
lugar na tela usando um sistema de coordenadas.
Vamos supor que queremos posicionar um cabealho. Usando o box model, o cabealho pode ser
estilizado para ser apresentado como mostrado abaixo:

Se quisermos o cabealho posicionado a 100px do topo do documento e a 200px esquerda,
podemos usar o seguinte CSS:

h1 {
position:absolute;
top: 100px;
left: 200px;
}

O resultado mostrado a seguir:
- 53 -

Como voc pode ver, posicionar com CSS uma tcnica precisa para colocar elementos. muito
mais fcil do que usar tabelas, imagens transparentes e tudo mais.
Posicionamento absoluto
Um elemento posicionado absolutamente no cria nenhum espao no documento. Isto significa que
no deixa nenhum espao vazio aps ser posicionado.
Para posicionar um elemento de forma absoluta a propriedade position deve ser definida para
absolute. Voc pode ento usar as propriedades left, right, top, e bottom para definir as coordenadas e
posicionar o elemento.
Para exemplificar o posicionamento absoluto escolhemos colocar quatro boxes nos quatro cantos
da pgina:

#box1 {
position:absolute;
top: 50px;
left: 50px;
}

#box2 {
position:absolute;
top: 50px;
right: 50px;
}

#box3 {

position:absolute;
bottom: 50px;
right: 50px;
}

#box4 {
- 54 -
position:absolute;
bottom: 50px;
left: 50px;
}

Ver exemplo

Posicionamento relativo
Para posicionar um elemento de forma relativa a propriedade position deve ser definida para
relative. A diferena entre os dois tipos de posicionamento a maneira como o posicionamento calculado.
O posicionamento para posio relativa calculado com base na posio original do elemento
no documento. Isto significa uma movimentao do elemento para a esquerda, para a direita, para cima ou
para baixo. Assim fazendo o elemento ocupa um espao aps ser posicionado.
Como exemplo de posicionamento relativo vamos tentar posicionar trs imagens relativamente as
suas posies originais na pgina. Notar como as imagens deixam um espao vazio nas suas posies originais
no documento:

#dog1 {
position:relative;
left: 350px;
bottom: 150px;
}
#dog2 {
position:relative;
left: 150px;
bottom: 500px;
}

#dog3 {
position:relative;
left: 50px;
bottom: 700px;
}

Ver exemplo
- 55 -

- 56 -
Lio 15: Usando z-index (Layers)
CSS usa o espao tri-dimensional - altura, largura e profundidade. Nas lies anteriores vimos as
duas primeiras dimenses. Nesta lio aprenderemos como colocar elementos em layers (camadas).
Resumindo, camadas significam como os elementos se sobrepem uns aos outros.
Para fazer isto definimos para cada elemento um nmero ndice (z-index). O comportamento que
elemento com nmero ndice maior se sobrepe queles com menor nmero.
Vamos supor um royal flush no jogo de poker. As cartas podem ser apresentadas como se cada uma
delas tivesse um z-index:

No caso mostrado, os nmeros ndice esto em uma seqncia direta (de 1-5), contudo o mesmo
resultado poderia ser obtido com uso de 5 diferentes nmeros, no em seqncia. O que conta a cronologia
dos nmeros (a ordem).
O cdigo para a ilustrao das cartas mostrado a seguir:

#ten_of_diamonds {
position: absolute;
left: 100px;
bottom: 100px;
z-index: 1;
}

#jack_of_diamonds {
position: absolute;
left: 115px;
bottom: 115px;
z-index: 2;
}

#queen_of_diamonds {
position: absolute;
left: 130px;
bottom: 130px;
z-index: 3;
}

#king_of_diamonds {
position: absolute;
left: 145px;
bottom: 145px;
- 57 -
z-index: 4;
}

#ace_of_diamonds {
position: absolute;
left: 160px;
bottom: 160px;
z-index: 5;
}

Ver exemplo

O mtodo simples, mas as possibilidades so muitas. Voc pode colocar imagens sobre textos,
texto sobre texto, etc.

- 58 -
Lio 16: Web-standards e validao
W3C a sigla para World Wide Web Consortium, uma organizao independente que gerencia as
normas para codificao na Internet (isto , HTML, CSS, XML e outros). Microsoft, Fundao Mozilla e
muitas outras organizaes so membros do W3C e formam um consenso sobre o futuro desenvolvimento de
normas.
Se voc tem alguma experincia com web design, provavelmente sabe que h uma grande diferena
na maneira como diferentes navegadores carregam uma pgina. frustrante e requer um consumo de muito
tempo, criar uma pgina que possa ser visualizada consistentemente no Mozilla, Internet Explorer, Opera e no
restante dos navegadores existentes.
A idia da normatizao criar um consenso e encontrar um denominador comum para uso de
tecnologias para a Web. Isto significa que seguindo as normas, um desenvolvedor ter a certeza de que sua
criao ser tratada de maneira apropriada em diferentes plataformas. Assim, ns recomendamos que voc
se beneficie do trabalho desenvolvido pelo W3C e valide sua CSS para estar em conformidade com as
normas.
Validador CSS
Para facilitar a verificao aos preceitos das normas CSS, o W3C desenvolveu um validador que faz
uma verificao da folha de estilos e retorna um relatrio com os eventuais erros e avisos caso sua CSS no
valide.
Para facilitar a validao da sua folha de estilos voc poder submet-la ao validador aqui mesmo
nesta pgina. Na caixa de texto abaixo, substitua a URL existente pela URL da sua folha de estilos e clique no
boto para validar. Voc ser informado pelo site do W3C se h erros na sua folha de estilos.
tyle/screen.css

Validar folha de estilos

Se o validador no encontrar erros; ser mostrada uma imagem como a abaixo, que voc poder usar
na sua pgina para anunciar que est usando um cdigo vlido:

O validador pode tambm ser encontrado neste link: http://jigsaw.w3.org/css-validator/
- 59 -

Apostila CSS

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Apostila CSS

Enviado por

Direitos autorais:

Formatos disponíveis

CSS Cascading Style Sheets

Você também pode gostar