Vous êtes sur la page 1sur 31

Etapa número 2 - Folha de estilos

Uma folha de estilos é conceitualmente bem simples, ela é uma página contendo definições ou
especificações de estilos, que instrui o navegador como apresentar os diferentes elementos de uma página.
Por enquanto, contenha sua curiosidade em saber o porquê de 'Cascata'. Eu voltarei a este assunto mais
tarde, quando começarmos a aplicar estilos no nosso HTML.

Para simplificar, começaremos construindo nossa folha de estilos dentro da própria página Web.
Mais adiante você descobrirá que pode ter sua folha de estilos em um 'arquivo externo de estilos' que pode
ser 'chamado' por várias páginas, com a grande vantagem de se poder controlar através deste arquivo
mestre, os estilos de todas as páginas que “linkam” para ele.

Os estilos que iremos usar serão definidos dentro do par de tags <head>...</head> como mostrado
a seguir...

view source print?

1.<style type="text/css" title="mystyles" media="all">


2.<!--
3.
4.-->
5.</style>

Note o par de tags <style>...</style> e iremos explicar mais algumas coisas neste par.

type="text/css" diz ao navegador que estamos usando um arquivo de texto puro para descrever nossos
estilos, nada de especial aqui.

title="mystyles" tem por finalidade identificar seus estilos através de um nome de sua livre escolha.

media="all" aqui que as coisas começam a ficar interessantes. Você pode ter uma folha de estilos para
descrever como sua página será apresentada na tela de um computador (media="screen") e outra
completamente diferente para formatar sua página para impressão (media="print"). Existem outros tipos
de mídia, tais como 'projection', 'tv', 'braille' and 'aural' (projeção, televisão, escrita braille e áudio). Agora
você entenderá a lógica de não usar 'bold' e 'italic'. Por enquanto usaremos o tipo de mídia 'all' (todas as
mídias), que tem propósitos gerais.

Os caracteres <!-- e --> se constituem em um modo de se 'esconder' texto em uma página Web - você
verá os textos somente na marcação do código. Isto é denominado 'comentario', e uma vez que os estilos
estão dentro da seção <head>...</head> do documento, eles não deverão aparecer na apresentação.

A primeira coisa que faremos será definir os estilos para a página como um todo, o body da página. Tudo
que estiver dentro das tags <body>...</body> terá este estilo ou conjunto de estilos que lhe for aplicado.

Basicamente a definição de estilos para body se parece com...

view source print?


1.body {
2. ...
3. }

body seguido por um par de 'chaves' { }.

Definiremos uma cor de fundo para a página...


Os navegadores por padrão, usualmente renderizam uma página na cor branca com textos na cor preta,
mas nós iremos definir um tom de cinza claro para o fundo da página. Abaixo a maneira pela qual
definimos uma cor de fundo para a página. Notar que não usamos sinal de igual '=' e sim dois pontos ':' .

view source print?


1.body {
2. background-color: #e8eae8;
3. }

O que significa #e8eae8 ?

As cores na Web são definidas pela mistura de 256 tonalidades de vermelho, de verde e de azul em
diferentes proporções. Humanos tem dez dedos nas mãos e contam de dez em dez. Computadores foram
projetados para contar de dezesseis em dezesseis, não que eles tenham dedos, mas uma vez ultrapassado o
9 (nove) não existe um numeral simples para representar 10, 11, 12, 13, 14, 15 assim estes numerais foram
substituidos por letras a, b, c, d, e , f. Desta forma, em um sistema de contagem 'hexadecimal' (base
dezesseis) o 10 é representado pelo 'a' e o 15 pelo 'f'. Ao ultrapassar o 15, adiciona-se mais um dígito e
assim '10' representa o 16. Usando-se este sistema de contagem, qualquer número entre 0 (zero) e 255
pode ser representado por dois números ou letras - 255 é ff. Então, #ffffff será o branco e #000000 o preto.

A cor que escolhemos para nosso fundo é composta de vermelho e8(232), verde ea(234), azul e8(232). O
símbolo # ('tralha') indica que estamos usando numeração hexadecimal e não números decimais
ordinários.

Algumas vezes você encontrará a sintaxe com apenas três dígitos, por exemplo, #2a0. Isto é uma
abreviatura para #22aa00. Quando a cor é representada por uma numeração composta por três pares de
dígitos que se repetem dois a dois, você poderá omitir o segundo dígito que o navegador entenderá a
abreviatura.

Usando esta abreviatura com três dígitos você poderá obter 4096 cores diferentes, e com seis dígitos mais
de seis milhões de cores.

Com uso de um dígito por cor, vermelha, verde e azul, cada uma tendo 16 níveis de brilho é possível
combinações para obter todas as demais.

Se você estiver digitando seu código, esta técnica de usar abreviadamente três dígitos é bem mais simples
e eficiente.

De toda forma, vamos agora definir uma cor para os textos na nossa página, diferente da cor padrão preta.
Você poderá usar a ferramenta 'colour picker' do Photoshop (ou de outro programa gráfico) e definir então
uma cor por um número hexadecimal de 6 dígitos...

view source
print?
1.body {
2. background-color: #e8eae8;
3. color: #5d665b
4. }

Observe na regra acima que as cores do fundo e do texto estão separadas por um ponto e vírgula ';'.
Bastante cuidado com o uso apropriado de vírgulas e ponto e vírgulas pois a troca ou esquecimento delas
causará erros.

E agora, vamos definir margens ao redor da página para acertar o posicionamento dos textos
convenientemente na tela, vamos usar uma margem de 50px (margin: 50px) na definição das regras para
body. Esta nova definição separada da anterior por ponto e vírgula.

view source
print?
1.body {
2. background-color: #e8eae8;
3. color: #5d665b;
4. margin: 50px;
5. }

Agora tudo o que digitarmos na página será representado numa cor verde escura acinzentada sobre um
fundo cinza. Veremos adiante casos especiais em que iremos alterar isto.

Etapa número 3 - Estilizando texto


Embora já tenhamos livrado nossa página do austero preto e branco, mudando para cores ao nosso gosto,
ainda podemos fazer muitas coisas. Podemos alterar o tipo e o tamanho das letras, o espaçamento entre
linhas e adicionar outros detalhes tal como indentação de parágrafos.

O estilo para fontes


Iremos trabalhar de início com o estilo das fontes (typeface) pois esta alteração fará uma diferença
marcante na página. Diferentemente de projetos para impressão, as páginas Web só conseguem mostrar os
tipos de fontes que estejam instalados na máquina do usuário, assim não podemos empregar no nosso
projeto um tipo de fonte de nossa livre escolha, mas teremos que escolher uma, dentre aquelas que mais
comumente encontram-se instaladas nos computadores - uma que venha pré instalada com o sistema
operacional. Isto limita consideravelmente nossa escolha. Você acabará descobrindo que está limitado a
duas ou três fontes do tipo serif (com serifas) duas ou três do tipo sans-serif (sem serifas) e uma do tipo
monospaced, (dactilográfica). Em lugar de escolher um tipo único de fonte, nós especificamos um
conjunto de fontes no pressuposto que uma delas esteja instalada no computador do usuário.

Abaixo um exemplo mostrando os tipos de fontes mais comuns pré instaladas em computadores Windows
e Machintosh. Você não pode assumir que a fonte que escolheu esteja instalada no computador do usuário
e por isso deverá fornecer alternativas.
A seguir uma especificação típica para escolha de uma família de fontes do tipo sem serifas.

view source
print?
1.font-family: Verdana, Geneva, Arial, sans-serif;
2.
3.

E, para fontes com serifas

view source
print?
1.font-family: Georgia, "Times New Roman", Times, serif;
2.
3.

Observe que nomes de fontes composto por mais de uma palavra devem ser escritos entre aspas - "Times
New Roman"

Vamos adicionar fontes sem serifas nos estilos para a nossa página e ver o que acontece.

Nossa página com fontes sem serifas »

O tamanho das fontes


A especificação do tamanho de fonte é um assunto controverso. Para impressão você poderá
tranquilamente especificar um tamanho em 'points' (pontos) e terá sempre aquele tamanho na impressão.
A quantidade de espaço de impressão assim como as quebras de linha serão sempre exatamente como
você as especificou. Na Web os tamanhos de fonte não seguem um padrão rígido variando de um
computador para outro, e em alguns casos, uma variação drástica. Dependendo do tamanho da tela do
usuário, do seu sistema operacional e do navegador usado um mesmo tamanho de fonte pode variar desde
de tão pequeno que se torne ilegível até tamanhos enormes semelhantes àqueles usados em livros grandes,
para crianças. Felizmente os navegadores permitem aos usuários definir suas preferências pessoais de
tamanhos, o que vem a atenuar as grandes variações, mas mesmo assim poderá haver diferenças entre o
que você projetou e espera, e aquilo que será de fato apresentado ao usuário.

Com a crescente popularidade dos dispositivos Wi-Fi (acesso sem fio) e portáteis, as condições de
navegação por sua página sofrerão uma mudança drástica nos próximos anos. Projetar hoje páginas Web
para o futuro implica em considerar designs fluídos que se auto adaptem aos diferentes tamanhos de tela.
Repita comigo, "A Web não é igual a uma impressora!"

Tamanhos relativos para fontes


Se você quer servir sua página Web ao maior número possível de usuários é melhor especificar um
tamanho de fonte relativo àquele escolhido como padrão pelo usuário. Várias são as maneiras de
especificar fontes relativas. Você pode usar percentagem (%) da fonte padrão do usuário ou uma unidade
de medida chamada 'em', o que é o mesmo que 100%. 1.2 em é o mesmo que 120%. A maneira
preferencial de especificar tamanhos relativos de fontes é através do método descritivo de tamanhos, algo
parecido com a especificação de tamanhos de camisas ( T-shirt). 'Medium' (médio) é o mesmo que 100%
ou 1em. 'Smaller' (pequeno) é um tamanho menor que 'medium' e 'Larger' (grande) é um tamanho maior
que 'medium'. Há também os tamanhos x-small, xx-small, x-large e xx-large (algo como - extra pequeno,
super extra pequeno, extra grande, super extra grande). A vantagem deste sistema sobre as percentagens e
ems é que os navegadores não tornarão os textos ilegíveis. Você pode por exemplo, especificar um
tamanho de fonte de 0.7 em ou 70% e isto ficar perfeito no seu PC. Para alguém usando um Mac com um
tamanho de fonte definido smaller por padrão, 70% poderá resultar em um tamanho ilegível. xx-small é o
menor tamanho de fonte capaz de ser apresentado por um computador.

xx-large x-large large medium small x-small xx-small

xx-small type This type is small but not too small to render
This type is way too small This type is way too small>

Tamanhos absolutos para fontes


Se o público para o qual você projetar seu site for bastante específico e usa basicamente as mesmas
configurações e tipo de computador que o seu, você poderá especificar o tamanho de suas fontes em
pixels. Pixels não variarão muito de um para outro desktop e assim os tamanhos de fontes serão similares
quando não idênticos. Uma vez que você utilize laptops ou dispositivos portáteis ou mesmo monitores
com resolução muito alta, os tamanhos em pixel irão variar de acordo com o dispositivo usado.

Para que você tenha uma idéia exata destas variações, eu construi três parágrafos usando três métodos
diferentes para definir o tamanho da fonte - percentagens - tamanhos T-shirt e pixels. Na tela do meu
computador, usando um navegador Mozilla, os tamanhos são bem parecidos, mas poderão não ser para
você.

Para esta linha foi definido um tamanho de fonte de 85% do tamanho das fontes deste tutorial.
Esta linha foi definida com o tamanho de fonte x-small
Esta linha foi definida com um tamanho de fonte absoluto de 11px

Convém ressaltar que você nunca deverá usar 'points' para definir tamanhos de fonte para tela (screen),
use-o somente para impressão (print).

Espaçamento entre linhas


O espaçamento padrão entre linhas é de aproximadamente 120% do tamanho da fonte. Aumentar um
pouco este espaçamento em geral resulta em melhoria da legibilidade, especialmente se as linhas são
muito longas. Irei discutir esta questão mais adiante. Para a nossa página no estágio atual o comprimento
das linhas é determinado pela largura da janela do navegador, assim, talvez um pouco maior do que o
ideal.
Para definir o espaçamento entre as linhas podemos novamente optar por medidas relativas (% or ems) ou
absoluta (px). Neste exemplo eu defini para toda a página, a altura da linha (line height), que vem a ser a
altura do caracter (fonte) mais o espaço extra acima, em 180% do tamanho da fonte (small). Como as
definições de estilo para body estão crescendo, eu coloquei as regras, cada uma em uma linha diferente,
(isto não fará qualquer diferença para o browser) para que as regras de estilo fiquem mais fáceis de serem
lidas por humanos. É de boa prática sempre colocar um ponto e vírgula ao terminar de escrever uma regra.

view source
print?
1.body {
2. background-color: #e8eae8;
3. color: #5d665b;
4. margin: 50px;
5. font-family: Verdana, Geneva, Arial, sans-serif;
6. font-size: small;
7. line-height: 180%;
8. }

Agora estamos com um página mais 'arejada'' »

Parágrafos
Tudo o que fizemos até agora afeta a página toda. Agora iremos ver como definir estilos para áreas
específicas da página.

Como eu já havia mencionado anteriormente, blocos de texto podem ser divididos em parágrafos para
facilitar a leitura. Existem várias maneiras de visualmente separar parágrafos uns dos outros. Você poderá
acrescentar espaços extras entre as linhas ou indentar a primeira linha.

Projetos tipográficos as vezes se utilizam de outras técnicas menos comuns tais como grandes indentações
ou mesmo exdentações (o oposto de indentação). Com CSS é possível conseguir todos estes efeitos, mas
por padrão o separador de parágrafos é o 'paragraph space' que equivale a metade da altura da linha 'line-
height'.

Para fazer com que um bloco de texto se transforme em um parágrafo, basta colocá-lo dentro de um par de
tags <p>...</p>. Para manipular os estilos a aplicar em um parágrafo nós adicionaremos p { } logo
após às regras já definidas para body e a seguir, do sinal de chaves { }, acrescentaremos a declaração
text-indent: 3em

view source
print?
01.<style type="text/css" title="mystyles" media="all">
02.<!--
03. body { background-color: #e8eae8;
04. color: #5d665b;
05. margin: 50px;
06. font-family: Verdana, Geneva, Arial, sans-serif;
07. font-size: small;
08. line-height: 180%;
09. }
10. p { text-indent: 3em;}
11.-->
12.</style>

Nossa página com parágrafos »


Observe que o primero parágrafo não está indentado - ele não foi colocado dentro das tags <p>...</p> e
em consequência em termos de HTML ele não é oficialmente um parágrafo.

Títulos
Eu já expliquei os seis níveis de títulos padrão do HTML. Nós não temos que ficar restritos a eles, pois
podemos redefiní-los de acordo com nossas necessidades. Novamente, isto é uma simples questão de
definir mais umas regras de estilo.

Títulos por padrão são grandes e em negrito com um espaçamento extra acima e abaixo. Lembre-se que
títulos dos níveis h1, h2 e h3 são maiores que o texto normal e dos níveis h5 e h6 são menores. Vamos
trabalhar com o título h3 e alterar sua fonte e cor.

view source
print?
1.h3 {color:#966b72;
2.font-family:Georgia,"Times New Roman",Times,serif;}
3.

Agora estamos com títulos »

Você deve ter observado que eu adicionei uma linha em branco acima do segundo título. Se você
simplesmente colocar ali um parágrafo vazio <p></p> isto não vai funcionar pois sempre é necesário
existir alguma coisa dentro das tags. Colocar um espaço em branco dentro de <p></p> também não vai
funcionar pois o HTML ignora espaços em branco que não estejam entre dois caracteres. O que nós
precisamos ali é de um caracter invisível e o HTML nos disponibiliza um, chamado de 'non-breaking
space' que é escrito desta forma &nbsp; veja a seguir...

view source
print?
1.<p>&nbsp;</p>
2.
3.

O caracter 'non-breaking space' é bastante útil também para você evitar que certas palavras sejam
quebradas ao fim de uma linha - palavras como nomes de pessoas ou de instituições.

Dicas extras
Antes de passar para a próxima etapa vamos experimentar alguns 'truques' na nossa página.

Na tag body eu defini uma margem de 50px para os quatro lados (ao redor de toda a página). Nós
podemos definir margens diferentes para cima, para os lados direito e esquerdo e para baixo (top, right,
left e bottom). Para isto basta que se declare as margens separadamente como mostrado abaixo:-

view source
print?
1.margin-top: 70px;
2.margin-left: 120px;
3.margin-right: 50px;
4.margin-bottom: 70px;
Isto faz nossa página se parecer a uma página impressa, com uma margem maior no lado esquerdo. Defini
também na nossa página uma das palavras em negrito e outra em itálico. Atenção que o itálico pode ser
renderizado erroneamente em alguns computadores e tornar-se ilegível em tamanhos de fontes pequenos.

Ver nossa página com textos estilizados »

Bem, agora você está com uma página onde acresentou algum estilo - sem muito esforço. Contudo a
página ainda se parece com um documento datilografado ou produzido em um processador de textos. A
seguir veremos algumas possibilidades interessantes de estilização para o layout.

Enquanto espera, você poderá fazer experiências com a página que acabamos de criar, modificando os
valores das declarações de estilos. Tente mudar os tipos e tamanhos de fontes e os espaçamentos entre as
linhas, porém o mais importante é que você carregue sua página em diferentes navegadores para observar
quão diferente sua página possa parecer.

Etapa número 4 - Mais estilização de texto


Antes de prosseguirmos com formatação de textos será interessante familiarizá-lo com alguns termos
básicos de tipografia.

Quando dizemos, tamanho de fonte ou em CSS font-size, estamos nos referindo à distância que vai
desde o topo de uma letra maiúscula tal como o 'A' até a base de uma letra que se estende o mais baixo
possível (letra descendente) tal como o 'p' ou 'y'. Existe ainda um espaço extra abaixo das letras, chamado
de 'leading'. Este nome vem do fato de as impressoras usarem este espaço como faixas para colocação de
uma guia ('lead') metálica com a finalidade de definir as entre linhas.

Hoje não usamos mais a 'lead', nós simplesmente determinamos o espaço total entre a base de uma linha e
a da linha seguinte. O espaçamento entre linhas em consequência vem a ser a altura da fonte mais o
espaço extra da 'lead'. Em CSS, dizemos line-height: 180%; com o valor especificado em
percentagem, ems ou pixels (px). Saiba mais sobre espaçamento de linhas, adiante.

Vertical-align permite ajustar a linha de base de letras individualmente dentro de uma palavra, mas
esta prática é bastante específica e usada em fórmulas matemáticas e não nos aprofundaremos muito nesta
propriedade agora. Para o exemplo mostrado abaixo eu poderia ter usado a marcação com as tags
<sup>2</sup> porém com CSS eu tenho muito mais controle.

E=MC2

CSS também possibilita o controle sobre o espaçamento horizontal entre as letras e as palavras.
Isto é apropriado para obter efeitos visuais em títulos.

T Í T U L O E S P A Ç A D O
letter-spacing: 0.5em; word-spacing: 0.5em

Projetando legibilidade.
Em épocas passadas em que os navegadores não ofereciam um bom suporte para as CSS um aspecto de
vital importância para formatação de textos, disponível até mesmo em máquinas de escrever mais
modestas, era impossível de se conseguir com a marcação HTML - trata-se do espaçamento entre as linhas
do texto, 'line spacing'. Quando o espaçamento entre as linhas de um texto é nulo ou muito reduzido, a
leitura torna-se difícil. Quanto mais longas forem as linhas tanto maior será a dificuldade de leitura.

Linhas muito curtas provocam interrupções constantes na maneira natural de leitura da esquerda para a
direita.

Linhas mais longas que um tamanho considerado ideal são também de leitura cansativa e tornam difícil a
localização do início da próxima linha.

Para uma leitura confortável as linhas devem ter um comprimento entre uma vez e meia e duas vezes o
comprimento ocupado por todas as letras (minúsculas) do alfabeto - isto significa de 40 a 60 caracteres ou
de oito a dez palavras.

Se as linhas são mais longas, o aumento do espaço entre as linhas ajudará na legibilidade. Muitas das
antigas páginas web apresentam textos estendendo-se da esquerda para a direita, ocupando toda a largura
da tela, independente do tamanho do monitor. Alguns sites ainda adotam esta prática - e hoje em dia as
telas tornaram-se bem maiores.

Por padrão, há um espaçamento entre as linhas de um texto. Este espaçamento padrão é de


aproximadamente 20% do tamanho da fonte ('cap heigh't mais 'descender' ou seja, desde o topo de uma
letra maiúscula até a base de uma letra descendente - ver figura no primeiro título deste tutorial) . Com
CSS você poderá definir o espaçamento que desejar para as entre linhas. Se você está usando tamanhos de
fontes relativos, você poderá definir o espaçamento entre linhas como uma percentagem do tamanho da
fonte - font-size: 1em; line-height: 1.5em (o mesmo que 150%). Se você está usando tamanhos
absolutos você poderá definir o espaçamento entre linhas assim: font-size: 11px; line-height:
16px.

As especificações para este parágrafo são: font-size: small; line-height: 180% o que vem a ser

equivalente a uma vez e meia o espaçamento entre linhas de um processador de texto antigo.
Para uma demonstração, veja este exemplo onde o primeiro bloco de texto construido, não possui margens
e nem uma line-height (espaçamento entre linhas). As estilizações gerais para o body definem somente
o tamanho, família e cor das fontes, bem como a cor do fundo...

body {

color: #5d665b;

font-size: small;

font-family: Verdana, Geneva, Arial, sans-serif;

background-color: #e8eae8;

O bloco de texto logo a seguir está dentro de um par de tags <div>...</div>, e é como se fosse uma
página dentro da página. Tem uma margem esquerda de 250px e direita de 200px e o espaçamento entre
linhas foi definido em 180%. Estes estilos foram acresentados ao corpo da página por um processo
conhecido como herança ('inheritance'). Exatamente como uma criança herda as características de seus
pais, as quais serão passadas para seus filhos, em CSS, este processo de "cascata" também acontece, com
elementos herdando os estilos definidos para elementos que os contém.

<div style="margin-left: 250px; margin-right: 200px;


line-height: 180%">...</div>

As 'divs' contidas nas páginas são uma parte muito importante das folhas de estilo em cascata e veremos
mais detalhes sobre elas, adiante neste tutorial.

Contraste
Diferentemente de uma página impressa que você lê por reflexão de luz, uma página em uma tela monitor
tem sua luminosidade própria. As diferenças de brilho entre um texto preto e um fundo branco tem
magnitude muito maior em uma tela do que em uma página impressa.

Porções grandes de texto preto sob fundo branco podem ser comparadas a uma caminhada sob sol intenso
sem uso de óculos escuro. Em casos extremos você apertaria os olhos para diminuir o efeito da claridade e
muito provavelmente no geral iria se sentir desconfortável e até mesmo sem saber bem porque.

Diminuir o contraste numa página Web, faz com que ela se torne mais confortável e menos estressante
para leitura. Mas por outro lado, se você exagerar acabará dificultando a leitura para pessoas com
restrições visuais.

Em um artigo como este, onde há uma considerável quantidade de texto para leitura, onde o usuário terá
que passar um período longo de tempo em frente a tela do monitor, é importante tornar a tarefa o mais
confortável possível.

Etapa número 5 - Listas


Outra técnica de formatação muito usada em páginas Web é a lista ('list'). Ela é como um parágrafo,
porém tem uns detalhes adicionais.

HTML define listas que podem ser do tipo com marcadores (bullets - listas não numeradas) ou listas
ordenadas <ul>...</ul> <ol>...</ol> com numeração no início de cada item da lista <li>...</li>
. Cada tipo de lista é fornecido com algumas opções, que podem ser definidas no HTML - <li
type="square"> coloca um marcador tipo um 'quadradinho', <li type="i"> coloca um numeral
romano minúsculo.

Lista não ordenada padrão

• Item da lista não ordenada


• Item da lista não ordenada
• Item da lista não ordenada

Lista não ordenada com opção de marcador tipo 'quadradinho'

 Item da lista não ordenada


 Item da lista não ordenada
 Item da lista não ordenada

Lista ordenada padrão

1. Ordered list item 1


2. Ordered list item 2
3. Ordered list item 3

Lista ordenada com opção de numeral romano minúsculo

i. Item 1 da lista ordenada


ii. Item 2 da lista ordenada
iii. Item 3 da lista ordenada

CSS possibilita mais opções e controle sobre as listas - basta você criar regras de estilo para ol ou ul .

ol {

list-style-type: lower-roman;

margin: 1em 0 1em 40px

O efeito destas definições de estilo é o mesmo que o de colocar a opção em cada item da lista no HTML
com a vantagem de proporcionar muito mais controle sobre as margens em volta da lista. Os quatro
valores : 1em 0 1em 40px são respectivamente para as margens de cima, à direita, em baixo e à esquerda
e podem ser definidos em ems, percentagens ou pixels.

Se você deseja controle sobre os itens da lista, você poderá definir as margens para eles também - para
aumentar o espaçamento entre eles por exemplo.....

ol li { margin: .5em 0 .5em 0 }


esta definição adiciona um espaço extra de 0.5 em acima e abaixo de cada item da lista ordenada. Para
uma lista não ordenada, bastaria você substituir o seletor por ul li .

E, melhor ainda, você pode definir seu próprio marcador usando uma imagem.

ul { list-style-image: url(smiley.gif) }

ul li { margin: 1em 0 1em 0}

• Se você gostou deste

• Vai gostar deste também

• E que tal este ?

E, por fim, uma imagem para cada item da lista...

<li style="list-style-image: url(icon1.gif);

margin: 1em 0 1em 0">Sabemos sobre pessoas</li>

<li style="list-style-image: url(icon2.gif);

margin: 1em 0 1em 0">Sabemos sobre imagens</li>

<li style="list-style-image: url(icon3.gif);

margin: 1em 0 1em 0">Sabemos sobre idéias</li>

<li style="list-style-image: url(icon4.gif);

margin: 1em 0 1em 0">Sabemos escrever</li>

• Sabemos sobre pessoas

• Sabemos sobre imagens

• Sabemos sobre idéias

• Sabemos escrever

Estilos definidos entre as tags head do documento aplicam-se à toda a página, o que não é o caso aqui.
Para aplicar estilos individualmente aos itens de uma lista, devemos definí-los nos itens ou 'inline'. Os
estilos são definidos na tag HTML de abertura <li> no corpo (body) da página. Notar que o IE6
(Windows) coloca os ícones muito próximos ao texto do item. Eu adicionei um espaço em branco para
compensar isto, conforme mostro abaixo....

&nbsp; Sabemos sobre pessoas.

Etapa número 6 - Links


Na abreviatura HTML é de especial significado as letras HT para Hiper Texto (HyperText). Links em
palavras, frases ou imagens de uma página podem ser clicados para nos levar a outros lugares. Estes
outros lugares são chamados de "âncoras". Imagine navios ancorados no imenso mar que é a World Wide
Web formando uma cadeia composta de links conduzindo às âncoras do navio no fundo do mar. Os navios
estão ancorados em pontos específicos e não à deriva, o que facilita sua localização.

Cada página tem pelo menos uma âncora. Por padrão, está âncora localiza-se no topo da página, mas você
poderá iserir mais âncoras em qualquer lugar da página que precisar chegar por um link.

<a href="http://www.wpdfd.com/index.htm">
Este é um link para o topo da minha Home Page</a>

Assim, você tem um par de tags <a>...</a> mais uma marcação href="..." dentro da tag de abertura.
Esta é uma referência ao endereço do hipertexto ao qual você será conduzido.

Se você colocar uma âncora na página em um lugar específico - bem, na verdade a âncora deve ser
colocada imediatamente acima do lugar para o qual você irá - veja a seguir...

<a name="myanchor"></a>

Um par de tags <a></a> com um nome, por exemplo, name="myanchor" dentro da tag de abertura. Não
há nada dentro do par de tags.

Para ir àquele local ("myanchor") você acresenta mais o seguinte no fim do link...

<a href="http://www.wpdfd.com/index.htm#myanchor">
Este é um link para uma âncora na minha Home Page
</a>

Como você já deve saber, os links em uma página são visualmente diferentes do restante do texto com a
finalidade de serem facilmente identificados. Por padrão os links são na cor azul e sublinhados. Quando
você clica em um link eles mudam para a cor vermelha. Mais tarde quando você voltar àquele link sua cor
mudará novamente para púrpura, indicando que você já o visitou. Qualquer um que tenha navegado pela
Web percebeu rapidamente este comportamento dos links.

Por padrão são três os estados de representação dos hipertextos para links em HTML.

Link não visitado Link ativo (clicado) Link visitado

Observe que o cursor também muda. A seta padrão muda para uma 'mãozinha' quando aponta-se
sobre o link.

Certamente, como 'designers' não estamos satisfeitos com o visual padrão dos links. Texto sublinhado
pode ser prático mais é feio. O essencial é que o link seja destacado do restante do texto para mostrar-se
que ali há algo especial. O contexto então torna-se um fator importante. Alguns textos são óbvios que se
constituem em um 'menu' de opções quer estejam ou não sublinhados. Seu destaque e a posição que
ocupam na página e mais o fato de que aparentam convidá-lo a ir a algum lugar dão uma indicação precisa
da sua função.

De maneira semelhante, deve haver uma boa razão para uma palavra ou frase dentro de um texto ter um
visual diferente. A razão pode ser para dar ênfase, mas aqui novamente é o contexto quem vai dar uma
indicação e também o fato de outras palavras ou frases terem o mesmo tipo de alteração no visual. Isto não
vai funcionar se cada link tiver uma cor diferente.

CSS permite estilizar o visual dos links. Links não precisam ser sublinhados e nem azuis. Tudo que temos
a fazer é estabelecer definições para as âncoras - 'a'.

a:link { color: #696;text-decoration: none }

na definição acima a cor do link foi alterada e o sublinhado retirado com a definição text-
decoration:none

Se você quiser mudar a cor do link visitado faça assim...

a:visited { color: #699; text-decoration: none }

CSS ainda permite estilizar um estado de link chamado 'hover'. Neste estado - quando o ponteiro do
mouse é passado sobre o link - mudei a cor do texto do link o que também fornece mais uma informação
adicional de que ali está um hipertexto para link.

a:hover { color: #c93; text-decoration: underline }

Neste estado, o sublinhado reaparece temporariamente enquanto o ponteiro está em cima do link, se assim
você desejar.

O estado 'active' do link acontece quando você clica. Normalmente o link muda de cor e em alguns
navegadores também aparece uma borda em volta do texto do link.

Para definir regras de estilo que se apliquem a todos os links de uma página você deve colocá-las dentro
das definições de estilo na tag head da página como mostrado abaixo.

a:link {color: #696; text-decoration: none;

background-color: transparent}

a:visited {color: #699;text-decoration: none;

background-color: transparent}

a:hover {color: #c93;text-decoration: underline;

background-color: transparent}

a:active { color: #900;text-decoration: underline;


background-color: transparent }

A ordem (sequência) que você escreve as definições de estilos para links é muito importante.
Normalmente a ordem não importa em CSS, mas neste caso é importante que a:hover e a:active
venham por último, caso contrário não funcionarão.

Agora um outro estado para links não endossado pelas CSS.

Este é um link 'morto'. Ele não faz nada. Se você tem um link na sua página que leva a mesma página,
bem, não faz muito sentido clicar em link que leve para o mesmo lugar. Isto é como um sinal, instruindo
você a dar uma volta para ir ao lugar onde você já se encontra.

Existem duas maneiras para tratar esta questão. Você poderá destacar o link de um modo visual diferente
dos outros links ou torná-lo invisível indicando assim que ele é um link não válido. Está técnica é
chamada de 'greying out' e você já deve ter visto isto em ação em outros programas instalados no seu
computador.

Afinal, porque manter o link morto se ele não é uma opção válida?

Bem, um dos princípios mais importantes de projeto de interfaces diz que você deve manter as coisas o
mais consistente possível. Se você remover um item de uma menu por exemplo, os demais itens vão sofrer
um deslocamento de sua posição inicial. É menos confuso para o usuário uma interface que se mantém
sempre a mesma e inalterada.

Um outro elemento disponível é a cor do fundo do texto. Algumas vezes os 'designers' mudam a cor do
texto do link para o estado hover e/0u ative, simulando uma marca de iluminação.

Existem muitos outros efeitos que você pode conseguir com CSS para os links, nós apenas demos uma
partida aqui e você poderá agora começar com suas experiências. Esta página exemplo demonstra os
princípios que você aprendeu aqui..

Etapa número 7 - Boxes CSS


Vimos que um texto na Web pode ser dividido em títulos e parágrafos através da marcação HTML. Vimos
também como podemos definir estilos ao nosso gosto, de modo a sobrescrever os estilos padrão. Vamos
agora ver como definir estilos que possibilitam ir além do que permite o HTML e construir layouts mais
interessantes.

O corpo ('body') da página é a área total visível, mas conforme eu mostrei na etapa número 3, é possível
compartimentar a página em pequenas divisões com seus estilos próprios. Estas divisões podem ser tão
pequenas quanto um caracter ou grandes o suficiente para acomodar porções retangulares inteiras de uma
página. Tudo o que temos a fazer é englobar entre o par de tags <div>...</div> a área que pretendemos
transformar em uma divisão. Tais áreas, são como uma mini página que em CSS são chamadas de boxes
CSS. Boxes CSS se constituem na unidade básica de construção de layout de uma página Web e eu
passarei a explicá-los com detalhes pois eles são muito importantes.

Boxes CSS podem ter uma largura e uma altura (width e height), uma cor de fundo ou até mesmo uma
imagem de fundo que pode se repetir constituindo um padrão de preenchimento. Um box CSS por padrão
estende-se da margem esquerda à margem direita do corpo da página. Se você não especificar uma
margem para o corpo da página (body) um box CSS ocupará toda a largura da janela do navegador. Se
você não especificar uma altura para um box CSS ele não terá altura (será considerada zero). Ao colocar
texto dentro do box ele se expandirá em altura de modo a acomodar o texto colocado - ou uma imagem.

Para manter o texto afastado das bordas do box você deve usar o enchimento - padding...

Você deverá tomar precauções ao usar padding pois ele se comporta de maneira diferente no navegador
Microsoft Internet Explorer. Ao contrário do que foi mostrado no diagrama acima o IE coloca o padding
dentro do box, e em consequência seu comprimento e altura não se alteram. Todos os demais navegadores
colocam o padding fora do box, adicionando seus valores ao comprimento e altura do box. Assim o seu
box sofrerá alterações de acordo com o navegador em que for visualizado e isto poderá trazer resultados
desastrosos quando você depende de maior precisão.

Além dos limites do padding você poderá ter uma borda...

Bordas estão disponíveis em uma variedade de estilos e você poderá definí-las separadamente para cada
lado, em termos de espessura, estilo e cor. Elas são mostradas com pequenas diferenças de acordo com o
navegador em que são visualizadas, a seguir como elas aparecem no navegador Mozilla...
A espessura da borda aumenta o comprimento do box.

Para separar um box de outro usamos as margens.

Margens e paddings costumam ser confundidas pois o que nós chamamos de margem de uma página de
um livro ou de uma página Web, na verdade é um 'padding' porque obviamente este espaçamento não
poderia ficar fora da página. Lembre-se que este caso é especial. Para o body de uma página Web, as
margens são contadas para dentro e para todos os demais boxes CSS são contadas para fora do box.

Posicionamento absoluto
Além de ter um comprimento e uma altura os boxes CSS podem ser colocados em qualquer lugar da
página através da definição CSS position: absolute; Posicionamento absoluto é um conceito fácil de
se entender, pois é assim que as coisas funcionam na vida real. Por exemplo: a localização de uma casa
poderia ser descrita assim; à 50 metros da Rua Norte e à 100 metros da Rua Leste.

A maneira mais simples de posicionar um box seria definir algo como top:50px; left:100px (topo:
50px; esquerda: 100px) mas não necessariamente terá que ser top e left, poderá ser top e right (topo e
direita), bottom e left (fundo e esquerda) ou bottom e right (fundo e direita).
Aqui você tem alguns boxes CSS estilizados e cada um deles com as definições de estilo mostradas. As
possibilidades de estilizações são infinitas.

Boxes com dimensões definidas e posicionados de forma absoluta, são semelhantes a recortes de notícias
e imagens de jornais que se faz para montagem de um álbum de recortes. O problema é que tais álbuns
permanecem com suas dimensões fixas - Páginas Web, não.

Posicionamento relativo
Se você quiser descrever a posição da porta da casa do seu vizinho você poderia dizer que ela encontra-se
a 70 metros da Rua Norte e a 100 metros da Rua Leste, ou ainda, dizer que ela localiza-se a 5 metros da
sua casa. Posicionamneto relativo considera que boxes CSS localizam-se próximos a um outro box. O
primeiro box ocupa a posição mais acima, o próximo box localiza-se abaixo do primeiro, o seguinte
abaixo deste. Eles efetivamente flutuam colocando-se de cima para baixo na página. Este exemplo é um
pouco fora da vida real, mas imagine-se dentro de uma piscina coberta onde uma pilha de colchões de ar
flutuassem, o primeiro colaria na cobertura, o seguinte em baixo dele e seguinte em baixo e assim por
diante.

Para fazer com que boxes flutem um ao lado do outro em lugar de em baixo, você definirá float: left;
ou float: right; à semelhança dos colchões de ar na piscina coberta, os boxes vão flutuando um ao
lado do outro enquanto houver espaço lateral. Acabado o espaço lateral eles ocuparão a posição abaixo
daqueles que já flutuaram, começando uma nova camada. Você poderá evitar uma situação destas
assegurando-se que a soma total das larguras dos boxes não ultrapasse a largura da página. Isto pode ser
feito especificando-se as larguras ('width') em pixel - mantendo a soma total abaixo da largura do
navegador. Ou ainda, definir as larguras em percentagens, mantendo a soma total igual a 100 - ou
preferencialmente um pouco abaixo de 100. Ao posicionar de maneira relativa, evite misturar pixel com
percentagem, pois os resultados podem ser imprevisíveis.

Esta página de exemplos para boxes flutuantes mostra o comportamento de boxes posicionados de
maneira relativa em colunas simples e múltiplas.

Etapa número 8 - Personalizando DIV's


ID's
Ao criar seus boxes com definições de estilos segundo suas necessidades, não estarão disponíveis
elementos HTML para adicionar à eles. Você terá que inventar os seus próprios.

Provavelmente haverão alguns ou talvez muitos boxes CSS <divs> em uma página e assim devemos dar-
lhes nomes que os identifique. Isto é feito através de um 'identificador' - que abreviadamente
denominamos id. Uma id deve ser única por box e identifica um box na sua página, permitindo que tanto
você quanto o navegador saibam como apresentar o box com aquele nome.

Um exemplo simples ocorre quando você divide sua página em três áreas horizontais. Um topo ('header')
contendo um logotipo e uma barra de navegação. A seção do meio a seguir contém textos e imagens. E
embaixo teremos o rodapé ('footer') com os direitos autorais e uma reprodução da barra de navegação
superior.

Este exemplo foi construido com 5 (cinco) boxes horizontais, sendo os dois boxes a mais, para a barra de
navegação e o logotipo, que foram posicionados logo abaixo do topo.
Observe que a margem à direita é menor que à esquerda para compensar visualmente as diferenças de
comprimento das linhas à direita, proporcionando melhor noção de centralização.

Nas definições de estilos usamos um símbolo # ('tralha') antes do nome que identifica 'id' o box.

#header {...}

#navbar {...}

#logo {...}

#midsection {...}

#footer {...}

Então colocamos as definições de estilo para o box, dentro de sua respectiva 'id' como mostrado abaixo...

<div id="header">...</div>

<div id="navbar">...</div>

<div id="logo">...</div>

<div id="midsection">...</div>

<div id="footer">...</div>

Caso tenhamos declarado estilos para o corpo da página 'body', nossos boxes herdarão aqueles estilos.
Qualquer estilo que você declare para o box tem prioridade sobre aquele declarado para 'body'. Isto é o
efeito 'cascata'.

Classes
Em alguns casos você irá se utilizar do mesmo box por várias vezes em uma página. Suponha que você
queira dividir a seção central da página mostrada em dois ou mais boxes separados. Neste caso poderemos
reutilizar um box em lugar de criar vários. Um box que pode ser reutilizado é nomeado com uma classe.
Exatamente como se tem 'classes' de flores ou insetos, uma classe aqui é basicamente um mesmo box com
conteúdo diferente. Para mostrar que temos uma 'classe' e não uma 'id' única, usamos um . (ponto) em
lugar de uma # ('tralha').
.midsection {} pode ser agora usado quantas vezes quisermos e a sintaxe para a div é conforme
mostrado abaixo...

<div class="midsection">...</div>

<div class="midsection">...</div>

<div class="midsection">...</div>

Span
Classes (mas não IDs) podem ser aplicadas em fragmentos de textos. Se desejarmos que algumas palavras
do texto tenham a cor vermelha, criamos uma classe chamada .redtext

.redtext { #c00 }

<span class="redtext">This is red text!</span>

Em lugar de colocar as palavras que queremos em vermelho, dentro de <div>...</div> , usamos


<span>...</span>. Isto é conhecido como elemento inline por aplicar-se a uma porção de texto dentro
de uma <div>...</div>

Use <span>...</span> sempre que você quiser estilizar diferentemente uma porção de texto que difere
do texto como um todo. Isto pode ser para cor, família de fonte, tamanho, peso ou qualquer outra
propriedade.

Assim, em CSS, existem elementos nível de bloco que são boxes com uma única ''id' ou uma 'classe'
reutilizavel. Podemos ainda ter os elementos inline que se referem a um nível de caracteres.

Agora estamos começando a chegar em algum lugar.

Etapa número 9 - Juntando tudo


A mais simples das páginas Web usará uma mistura de ids e classes e possivelmente uma combinação de
posicionamento absoluto e relativo. Vamos dar uma olhada na nossa página composta de cinco boxes que
estudamos na etapa número 8, e talvez, você queira dividir a seção central em colunas. Para isto usaremos
a declaração float:left tornando as coisas mais simples.

Uma coluna à esquerda, de largura reduzida, normalmente, é usada em uma página Web para menu de
navegação.

.leftcol {}

A coluna do meio é para o conteúdo principal .

.midcol {}
E, à direita uma outra coluna também de largura reduzida, usada para links relacionados ou de anunciantes
e parceiros.

.rightcol {}

Todas as três colunas terão sua largura definida em percentagens de modo a que possam se ajustar de
maneira fluida à largura da página.

Observe que eu usei classes para nomear as colunas de modo a que poderei reusá-las mais adiante.

Este exemplo mostra a seção central única .midsection transformada em três colunas flutuando à
esquerda.

<div class="leftcol">...</div>

<div class="midcol">...</div>

<div classs="rightcol">...</div>

Esta técnica amplia e torna mais interessante a construção do layout.

Não deixe qualquer uma das divs sem conteúdo, ainda que elas tenham que ser preenchidas com espaços
vazios. Coloque espaços &nbsp; dentro delas.

Etapa número 10 - Fazendo as coisas certas


Doctypes e validação
Chegamos a décima etapa das lições 'CSS desde o início' e eu tenho uma confissão a fazer. Tudo o que eu
mostrei para vocês até aqui, - marcação de códigos e páginas de exemplos estão todas erradas! Bem, tudo
provavelmente funcionou muito bem a menos que você esteja usando um navegador muito antigo,
contudo se você testar o que fizemos em um verificador de sintaxe ou submeter a uma programa de
validação, tudo que fizemos será reprovado.
O que é um programa de validação? deve estar você perguntando.

Você já deve estar familiarizado com o conceito de checador de sintaxe. Provavelmente existe um deles
no seu programa processador de textos. O checador compara as palavras que você digita, com uma lista de
palavras de um dicionário e alerta quando encontra alguma palavra que não está no dicionário. Pode ser
que a palavra não esteja listada no dicionário, mas também pode ser que você tenha digitado errado. Em
processadores de textos mais sofisticados é possível checar a gramática, a existência de verbo em uma
frase, alertar para o uso repetido de uma mesma palavra 'e' importuná-lo incessantemente.

Para que um checador de palavras ou de gramática possa funcionar a contento, ele precisa saber qual é a
'linguagem' usada. O meu checador de inglês da Inglaterra é diferente do inglês dos EUA - e se você não
estiver nos EUA?

Assim como suas escritas em inglês ou seja lá qual for o idioma usado é checado pelo processador de
texto, o HTML e as CSS podem e devem ser checadas também. Se você comete um erro na sua escrita, as
pessoas provavelmente julgarão tratar-se de um erro de datilografia, mas entenderão o que você quis dizer
e não haverá prejuizo para o entendimento. Um pequeno deslize no HTML ou nas CSS, por outro lado, é
uma história diferente. Algo aparentemente insignificante como uma vírgula ou uma aspas fora do lugar,
pode fazer toda a diferença entre uma página funcionando ou não - isto dependerá do erro e de como o
navegador tratará o erro. É uma boa idéia submeter seu HTML e as CSS a um checador de sintaxe ou a
um validador.

Uma das vantagens de se utilizar um editor de HTML decente é que ele vem com um checador de sintaxe
embutido. Você não dispõe de checadores em editores de textos simples e de propósitos gerais. Se você
possui um editor tipo HomeSite ou BBEdit ou um editor WYSIWYG tal como o Dreamweaver ou
GoLive, você terá um checador e ainda sugestões de como corrigir erros. Se você não possui um editor
assim, poderá usar um validador online fornecido pelo W3C - Validador HTML do W3C - Validador CSS
do W3C - onde você faz o upload de seu arquivo e obtém de imediato um relatório de erros ou de não
existência de erros!

É evidente que o programa tem que saber qual é a 'linguagem' que foi usada na marcação - existem várias
versões ('linguagens') do HTML. Todos os exemplos que mostrei, foram escritos usando o HTML 4.01 -
esta é a versão atual e a mais utilizada. Existem sub-versões do HTML 4.01 - 'Strict', 'Transitional' e
'Frame Set'.

Strict é um conjunto de regras muito rígidas que definem o que pode e o que não pode ser escrito em
HTML.

Transitional é um conjunto um pouco mais flexível e permite escrever algum HTML mais antigo e para
algumas peculiaridades próprias de navegadores.

Frame Set não é muito usado nos dias atuais. Não temos nos utilizado do uso de 'frames' pois eles estão
em desuso desde o aparecimento das CSS.

A maioria das pessoas está satisfeita com o uso de 'Transitional' pois ele não é tão rígido com a marcação,
outras gostam de fazer tudo conforme 'reza o manual' e preferem usar 'Strict'.

Para dizer ao navegador qual a linguagem de marcação e a sub-versão que você está utilizando, coloque a
declaração de DocType logo no início da marcação, no topo da página - acima da tag de abertura <html>.
Assim como mostrado abaixo...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD


HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Não vou analisar a declaração agora, basta que você saiba por enquanto que esta declaração no topo da
página fornece ao validador as informações necessárias para ele fazer seu trabalho de validação. Agora o
validador saberá quais são as regras (normas) você esta utilizando na marcação e poderá fazer as análises
necessárias.

Ao adicionar o DocType, poderei checar minhas páginas em um editor de HTML que forneça esta
facilidade e estar seguro de que terei um código limpo. Agora que já sabemos da importância do Doctype,
podemos voltar ao assunto estilizações.

Etapa número 11 - Folhas de estilo externas


Todas as folhas de estilo que construi até agora, foram colocadas dentro da seção <head> das páginas.
Este procedimento facilita o entendimento, pois basta olhar o código de marcação da página e ver como
foram definidas as regras de estilo. Tudo está colocado em um único lugar. Contudo é muito raro termos
páginas isoladas, o mais comum é que tenhamos várias páginas com uma apresentação semelhante em
todo o Web site.

Em lugar de colocar as folhas de estilo repetidamente em cada uma das páginas construidas, seria uma boa
idéia que tivessemos uma única folha de estilos que pudesse ser lincada a cada uma das páginas. Isto
permite mudar a cor de fundo das páginas ou usar um tipo ou tamanho de fonte diferente para todo o site,
bastando que você faça a alteração na folha de estilo 'mestre'. De fato, você pode mudar completamente a
apresentação de todo o site, alterando apenas um arquivo.

Dê uma olhada em http://www.csszengarden.com/ para ver este princípio em ação. Vários designers
construiram suas folhas de estilos para uma página padrão e isto demonstra de uma forma admirável como
pode-se projetar os mais variados 'skins' para um mesmo 'esqueleto' da página, alterando completamente
suas características. Para fazer uso de uma folha de estilo externa, basta lincá-la ao documento como
mostrado a seguir:

<link rel="stylesheet" href="basicsstyles.css"

type="text/css" media="screen">

Isto diz ao navegador para procurar as especificações de estilo em um arquivo chamado


'basicsstyles.css'. Trata-se de um arquivo de texto puro - type="text/css" e os estilos foram
otimizados para apresentação em uma tela de computador - media="screen".

As folhas de estilo não estão limitadas às telas de computador, você poderá criá-las para servir a outras
mídias como, impressão, projeção e até mesmo braille. Se você pensar sobre isto, concordará que uma
folha de papel para impressão não tem o mesmo formato de uma tela de computador e ninguém gosta de
desperdiçar preciosas quantidades de tinta em áreas preenchidas com cores sólidas, quando tudo o que se
quer impresso é um texto em preto e branco. Uma folha de estilo para impressão deve especificar uma
área de impressão compatível com uma folha de papel e ao contrário de estilizações para a tela deverá usar
tamanhos de fontes em 'points' (pt). Esquemas coloridos devem ser minimizados ou mesmo abandonados
completamente. Então tudo o que você precisar fazer é adicionar outro link na seção <head> do
documento, imediatamente abaixo daquele para mídia tela.
<link rel="stylesheet" href="printstyles.css"

type="text/css" media="print">

Se você decidir que sua folha de estilo serve tanto para tela como para impressora, você poderá usar um
link como mostrado a seguir...

<link rel="stylesheet" href="styles.css"

type="text/css" media="all">

Embora a maioria das minhas folhas de estilos sejam do tipo externa, eu começo meus projetos com a
folha de estilo declarada no próprio documento. Quando eu estou satisfeito com as definições de estilo que
construí copia-cola a folha em um arquivo novo e coloco um link para ele na página.

Etapa número 12 - Estilizando tabelas


Embora as tabelas venham sendo usadas para layout desde as eras negras da Web, penso que devo mostrá-
las aqui, para mostrar que layout construido com CSS oferece muito mais escopo e versatilidade. Tabelas
tem por razão de ser e finalidade, a apresentação de dados tabulares, aquelas coisas que normalmente são
colocadas em 'folha de dados' onde você precisa de linhas e colunas para relacionar textos ou mesmo
figuras.

Nos tempos antigos (e de navegadores hoje ultrapassados) você alterava a apresentação de uma tabela e de
suas células, usando várias propriedades - cores de fundo, imagens de fundo, etc. Uma grande quantidade
destes atributos atualmente está em desuso e há algum tempo já não são mais válidos - muito embora eles
hoje ainda funcionem, para o futuro é bom não contar com eles. Na verdade é melhor que você não conte
com eles desde já. Se você tentar colocar uma imagem de fundo que seja renderizada no Netscape 4 ou
anterior tera que repetí-la para cada célula individualmente, como se tivesse dividido a imagem em
múltiplas partes, tornando a tarefa pouco usual e frustrante.

A prática usual de definir uma altura e uma largura para a tabela em pixel ou em percentagem não é mais
válida. Tabelas devem se auto ajustar em dimensões ao seu conteúdo.

A estilização de tabelas com CSS tem seus macetes próprios e nem sempre é simples e imediata. Você
poderá construir sua estrutura de tabela usando display:table; and display:table-cell; no qual
cada célula é uma div, e para fins de estilizações usar os elementos HTML de tabelas - table , tr , td ,
th , etc - com a finalidade de facilitar a tarefa.

tr é uma linha da tabela, uma fila horizontal de células. td e uma divisão de uma linha da tabela. Você
deve estar pensando em coluna, mas o comportamento não é de coluna e você não pode colocar uma
imagem de fundo na coluna ou estilizar.

As tabelas herdam alguns estilos das DIV's em que forem colocadas, alguns, mas não todos os estilos. Se
você definir font-family: verdana, arial, sans-serif e color: #009 , para o corpo (body) de
sua página, as tabelas herdarão estas definições, mas não herdarão tamanhos de fontes e nem alinhamentos
de textos. Há também uma hierarquia para os elementos de tabelas. Uma definição para td prevalece
sobre uma para tr, que por sua vez prevalece sobre aquelas para table. Você pode tirar vantagem desta
hierarquia. Se você definir uma cor preta para fundo da tabela e uma cor branca para td e um
cellspacing="2", você terá uma tabela com com células brancas e uma borda preta de 2px ao redor.
Nota do tradutor: No original desta página o autor mostrou a seguir 5 tabelas estilizadas e comentadas,
com as regras de estilo para cada uma delas incorporadas na própria página. Como estou usando em meu
site marcação XHTML 1.1 que não admite alguns atributos usados pelo autor, criei uma página separada
para mostrar as tabelas estilizadas e assim continuar com minha página válida.

Veja o código fonte da página dos exemplos para estudar as regras de estilização das tabelas.

Ver Tabela 1. Esta simples tabela tem um fundo definido como transparent e uma cor cinza bem clarinha
pra o fundo das tds.

Ver Tabela 2. De acordo com os dados contidos na tabela você poderá dar maior ênfase às linhas
horizontais ou às colunas verticais.

Ver Tabela 3. Aqui um efeito de alto relevo em 3D conseguido através de definições de estilos para as
cores das bordas. Para as linhas do cabeçalho da tabela foi definida uma cor escura.

Ver Tabela 4. Usei um gradiente para as linhas do cabeçalho e uma borda esquerda na cor cinza clara
para separar as colunas.

Ver Tabela 5. OK, eu sou um fã de Mondrian, mas minha intenção aqui é demonstrar que se você quiser,
poderá estilizar as células da tabela individualmente.

As possibilidades de estilização de tabelas são muitas. Quem disse que as tabelas tem que ser entediantes?

Etapa número 13 - Estilizando formulários


A estilização de formulários em páginas Web, não se constitue em uma grande prioridade. Os formulários
normalmente são deixados como são - e por várias boas razões.

1. As convenções padrão usadas para formulários, funcionam muito bem.


2. Se um formulário não tiver o aspecto padrão esperado, os usuários poderão se confundir.
3. Não é bom o suporte para estilização de formulários pelos diferentes tipos de navegadores.

Vamos examinar cada um destes aspectos com mais detalhes.

'As convenções padrão usadas para formulários, funcionam muito bem.'

Talvez. Ainda encontra-se uma grande quantidade de formulários mal projetados, tanto para mídia
impressa quanto para a Web.

Basicamente eu detesto preencher formulários e conheço muitas pessoas que também detestam.

Contudo os formulários se constituem em um meio eficaz de se coletar informações facilitando seu


processamento. Então, o que há de errado com o design dos formulários?

A primeira questão diz respeito a um formulário de aparência complicada. Isto intimida o usuário e faz
com que ele 'entre em modo defensivo'.

A seguir vem as perguntas que aparentemente são irrelevantes ou indiscretas. Por que eles querem
saber o dia do meu aniversário?
O aspecto complicado do formulário é um problema de layout. Você pode 'descomplicar' ou tornar
simples um formulário projetando-o de uma forma clara e ordenada. A atenção inicial deve ser dispensada
a ordenação dos textos e clareza do layout.

Há que se considerar ainda o tamanho e posicionamento dos textos dos rótulos e também de notas
explicativas. Os textos devem ser posicionados acima, abaixo ou à direita dos boxes. Se você preferir
colocar os rótulos à esquerda, use align: right; para evitar que um espaçamento maior entre o texto e
o box traga complexidade ao layout, dificultando a identificação. Tente também evitar o uso de diferentes
tamanhos de boxes input e não preencha espaços vazios, simplesmente porque eles existem. Se um box
para código postal é menor que os demais destinados ao endereço, deixe-o menor mas, não use o espaço
que sobrou para colocar outro box, simplesmente porque há o espaço.

Em uma página Web você não precisa economizar espaços. Racionalize o tamanho de seus boxes de
input. Alinhe-os verticalmente. Projete-os claros e ordenados.

O formulário acima parece complicado. Ele tem dois eixos verticais e o movimento dos olhos para a
leitura não flui naturalmente, tendo que pular na vertical e na horizontal para localizar o box seguinte.

Um projeto mais simples com um só eixo vertical propicia um movimento natural de leitura.

Ao contrário de um formulário impresso, na Web os formulários podem ter alguma parte fora da visão do
usuário pois a área de apresentação está limitada à janela do navegador. Assim, um formulário muito
longo em uma página pode requerer seguidas rolagens de tela, o que se torna inconveniente. Neste caso é
preferível dividir o formulário em múltiplas páginas - com o cuidado de facilitar a eventual volta às partes
do formulário, caso o usuário necessite alterar algo já informado.
'Se um formulário não tiver o aspecto padrão esperado, os usuários poderão se confundir.'

Sim, você não deve 'queimar a cuca' com o design de formulários. Um box de input para texto deve
comunicar ao usuário a sua função, assim como um pop-up ou um botão de submit. Não há muito a
acresentar a um fundo branco com texto em preto - até porque alguns navegadores não permitem nada
mais, além disto!

É uma má idéia confundir um box de input com um texto comum, ele terá que ser diferenciado e
comunicar seu propósito.

Os elementos que você pode estilizar são input, textarea e select mas esteja ciente de que ao estilizar
um campo de input não só o campo será estilizado como também os outros inputs como radio boxes,
check boxes e os botões Submit (Enviar) e Clear (Limpar).

É seguro estilizar font-family e font-size. text-color pode ser estilizado se você assim
preferir. Com background-color deve-se ser mais criterioso. Estilizar o fundo com uma cor em
tonalidade mais suave do que a da página, dará ao campo um aspecto menos agressivo.

Ao alterar a borda de um box para input de texto estaremos afetando também a borda do botão submit e
ele poderá ficar parecido com um box de texto se você não tomar suas precauções. Para evitar isto você
deverá criar e estilizar uma div que englobe o box de texto, tal como mostrado para #typein logo
abaixo...

#typein { }

#typein input {

color: #633;

font-size: 10px;

background-color: #ebebd9;

padding: 3px;

border: double 3px orange

Se você quiser estilizar uma textarea de maneira semelhante ao box de texto, faça assim...

#typein input, #typein textarea {

color: #633;font-size: 10px;

background-color: #ebebd9;

padding: 3px; border: double 3px orange;

Select (popups) são apresentados de modo diferente de acordo com o navegador ou plataforma em que são
visualizados. Definir para eles um tamanho e uma família de fontes é o máximo que devemos fazer. A
aparência que eles assumem quando são clicados está fora do seu controle.
'Não é bom o suporte para estilização de formulários pelos diferentes tipos de navegadores. '

Isto é melhor demonstrado através de alguns screenshots.

A mesma estilização renderizada em Explorer (Win), Mozilla, Safari (Mac) e Opera mostra as
variações de apresentação. Mais considerações sobre diferenças entre navegadores, veremos mais adiante.

A questão fundamental é que não estamos tentando criar uma obra prima com formulários. Estamos sim,
tentanto fazê-los fáceis de usar sem serem intimidadores e com uma apresentação bem intuitiva.

Aperfeiçoar a experiência do usuário com auxílio de scripts de validação é uma outra história que não
abordarei agora.

Etapa número 14 - Navegadores (Browsers)


Grande. Onde estaríamos sem eles? Quantas vezes eu ouvi pessoas dizendo que gostariam que existisse
apenas um tipo de navegador. Qual deles, eu penso?

Cada navegador tem sua própria folha de estilos padrão. Esta folha, será utilizada caso você não defina
uma personalizada. Naturalmente, as folhas de estilos padrão dos navegadores são diferentes entre si. Elas
foram definidas por diferentes fabricantes e comportam-se de maneira diversa nos variados tipos de
computadores e plataformas.

É maravilhoso que elas sejam bem semelhantes, contudo as diferenças existentes não são tão
insignificantes. Se você assumir que outros navegadores irão renderizar sua página Web de maneira
'similar' àquela que você vê no seu navegador, rapidamente perceberá que 'similar' não significa 'igual' e
pode até significar 'bem diferente' em determinados casos - mesmo com uma folha de estilos CSS válida.

Eu não poderia entrar em uma exaustiva comparação cross-browser aqui, mas existe na Web uma grande
quantidade de material a respeito. Vou citar algumas que mais me incomodam. Usualmente resumem-se a
uma questão entre o navegador Explorer e os demais navegadores - mas nem sempre é isto. Uma lista dos
navegadores atuais esta disponível em WPDFD News page (NT: no site do autor da matéria). A maioria
dos navegadores é gratuito ou oferece um 'test-driven' sem custos.

Microsoft Internet Explorer é o navegador mais usado. Nas suas variadas formas é responsável por algo
em torno de 85% dos navegadores. Lamentavelmente ele se comporta segundo suas regras próprias e não
segue as normas standards, tal como os demais navegadores. Ele segue a maior parte das standards, mas
os grandes problemas ocorrem exatamente onde há divergências das standards.

O Box Model
Em todas as versões do IE, a implementação do padding é diferente dos demais navegadores. O resultado
disto é que se você especifica uma largura para um box em pixel e define um padding à esquerda ou à
direita, o box terá uma largura total no IE diferente da dos demais navegadores - e isto poderá arruinar um
layout preciso.
IE assume que o padding deve ser computado dentro do box, reduzindo desta forma a largura para o texto
- o que, devo admitir me parece razoável. As standards do W3C definem que o padding deve ser
adicionado fora da largura definida para o box, sendo assim toda a largura ocupada pelo texto. Qual é o
conceito mais lógico é uma discussão que pode se prolongar para sempre, mas o fato é que existe esta
diferença de interpretação pelos navegadores, que poderá derrubá-lo, caso você não confira sua página no
IE e em outros navegadores.

Nota do tradutor: À época desta tradução o IE 6 já oferecia suporte correto para o Box Model.

O que significa 'Relative'


'Relative' no contexto das CSS é um conceito bem simples. Cada box ocupa uma posição em relação ao
box imediatamente superior a ele. Atenção! Se você mover um box de seu 'fluxo natural' definindo para
ele um valor para a propriedade top ou bottom, é de se supor que o box sairá do seu lugar natural,
deixando vago o espaço que ali ocupava - como se um carro saísse de um estacionamento, deixando livre
a vaga que ocupava. O IE (versão para Mac) "fecha' o espaço deixado vago, deslocando tudo que se
encontra próximo, para cima ou para baixo.

No desenho à esquerda o que se supõe acontecer quando você move um box, o espaço ocupado
transforma-se efetivamente em um box invisível. À direita o que acontece no IE (Mac) e que poderá
arruinar seu layout se você não estiver ciente disto.

A maneira como a marcação é escrita não deve influir na


estilização
Agora, aqui um 'bug' que me provoca 'bug' porque definitivamente não é consequência de uma
interpretação errônea das standards e sim um 'bug' mesmo. É de se admitir que os navegadores ignorem
totalmente a formatação da marcação do código HTML. Não faz a menor diferença se você escreve seu
código em uma linha única ou se usa espaçamento duplo entre as linhas. Acontece um bug no IE (Mac)
pois quando você define float boxes na horizontal e escreve a marcação HTML correspondente em linha
separadas, fica estabelecida uma confusão para o navegador. Você tem que escrever a marcação em uma
linha contínua para obter os resultados esperados. Agora, resolver este 'bug' não requer grandes
malabarismos, no entanto o desenvolvimento do IE (Mac) parou, ele está condenado à morte e atualmente
você dispõe de outras ótimas opções para escolher. - contudo tal como abandonar velhos hábitos, a morte
de velhos Mac será árdua.

Etapa número 15 - O futuro


As especificações para as Folhas de Estilos em Cascata e suas possibilidades estão sendo continuamente
atualizadas e os navegadores por sua vez também sendo atualizados para dar suporte às inovações
introduzidas. Este é um processo contínuo sobre a coordenação do pessoal do W3C (World Wide Web
Consortium).

Felizmente as diferenças de implementações hoje existentes serão minimizadas se não eliminadas


completamente, contudo há outros fatores a considerar.

O conceito de visualização de uma página Web exclusivamente em uma tela de computador está
mudando. As pessoas estão usando outros dispositivos que não um computador e os conteúdos
disponibilizados para interfaces que não necessariamente sejam um navegador.

Aguarde mais!

Os fabricantes estão empenhados na tentativa de identificar novos caminhos para implementar facilidades
de comunicação nos seus produtos - telefones, televisões, carros, geladeiras, fornos de micro-ondas são
seus objetivos imediatos. Ultimamente a cultura da Web na cabeça das pessoas acabou por unir a todos e
possibilitar acesso à raça humana a um mesmo nível de sofistificação em comunicação do que aquele
constatado entre as comunidades de formigas!

Usando-se CSS, não importa qual é o dispositivo usado para visualizar o conteúdo. Com CSS é possível
acomodar o conteúdo em uma grande diversidade de mídias apesar de na maioria das vezes usarmos
somente para duas delas - tela e impressora ('screen' e 'print').

A conclusão disto tudo é que você não deve parar nas conquistas alcançadas, você deve ir em frente,
ou desistir.

Para finalizar esta série de lições 'CSS desde o início', eu desejo que ela tenha estimulado o seu apetite
para saber mais - e há muito mais, pode acreditar.

Abaixo, uma listagem de outros artigos sobre as CSS no meu site WPDFD.

Turning the Tables


Converting table layouts to CSS

Style Sheets Without Tears


3-part series on basic style sheets

CSS - Browser Support


How well the browsers cope

Thinking Inside the Box


The fundamental building blocks of CSS

Box of Tricks
Rollovers without JavaScript
Scripting the Box
The power of CSS plus JavaScript

Drawing with CSS


Draw simple charts using CSS boxes

FunWithFonts.com
Fairly advanced layout stuff

Film-strip Rollovers
A simpler way to do rollovers

Dynamic CSS Animation


Getting your divs to move