CSS, Uma Abordagem Geral

SOBRE ESTA APOSTILA
Antes de mais nada, gostaria de comunicar que esta apostila é ligeiramente

diferente. O que se vê nas apostilas sobre CSS é um “tecnicismo” que eu considero
muito chato! É só “mostrar propriedade, mostrar valor, mostrar exemplo”, “mostrar
propriedade, mostrar valor, mostrar exemplo”... É, realmente é uma maneira
rápida de alguém escrever uma apostila e mais rápido ainda de um outro alguém
conhecer os principais conceitos abordados nela, mas não é uma maneira que eu
gosto de escrever!
Por favor, não pensem que sou pretensioso, egocentrista, ou algo do tipo! Quero é
distância disso! Podem ter certeza de que não sou igual a muito blogueiro
estrelinha, que diz que um blog não pode ficar num sei quantos dias sem novo post
e tudo o mais, mas se a gente for contabilizar todas as matérias publicadas,
metade é sobre as estatísticas de acesso do blog dele, quantas pessoas chegam
pelo Google, quantos visitantes blá blá blá, etc. É o que eu chamo de “Síndrome da
Rede Globo”.
Bem, voltando ao assunto principal, contrariando as tendências minimalistas da

internet (e do mundo), meus textos são regados com muitas palavras que podem
ser consideradas “desnecessárias”, para a maioria, mas que, pessoalmente,
acredito ser mais fácil para aqueles que ainda não tiveram contato com o assunto.
Na verdade, creio ser dessa forma para qualquer tipo de apostila. Se eu não
conheço sobre um assunto e pego um livro (ou, no caso, apostila) para aprender,
fico um pouco intimidado com tantas novas informações de uma só vez, e uma
“informalidadezinha” é sempre bem vinda!
É exatamente isso que tem por aqui: um monte de informalidadezinha!
Uma outra peculiaridade é que não apresentarei enormes listas com as principais
propriedades e valores CSS atualmente disponíveis. Para isso, já existem inúmeros
excelentes websites com exemplos dos mais elucidativos! Vou me limitar a somente
“prescrever” alguns links, com o intuito, também, de não tornar a apostila muito
extensa e cansar o leitor.
CSS: uma abordagem geral - http://tarciozemel.asciijf.com/ - 2007

1
Mas é o seguinte: ficará muito mais fácil (muito, mesmo!) continuar lendo se você
já tiver um prévio conhecimento sobre (X)HTML1, e você terá 0% de chances de
entender alguma coisa, caso não tenha a VONTADE de aprender!
Só para esclarecer, o público-alvo da apostila são os iniciantes na área de CSS.

Isso, aqueles caboclinhos que ainda não sabem ao certo o que seriam folhas de
estilo em cascata, e mesmo aqueles que jamais ouviram falar em tal coisa (e
também os que acreditam que o certo é “CCS”...).
Para finalizar, pedirei uma coisa para aqueles corajosos que, porventura, leiam a
apostila na íntegra: poderiam, por favor, caso encontrem algum texto errado,
algum exemplo que não funcione, enfim, alguma coisa que não deveria estar onde
está, me enviar um e-mail para que eu possa corrigir? De quebra, se não for pedir
demais, se vocês tiverem alguma sugestão, idéia, estímulo, doação (brincadeira),
podem, também, me enviar uma mensagem?
Vai que esse negócio todo de ter um blog e disponibilizar apostila dá certo... Aí
outras versões terão que surgir! (-:
1 Também um um pouquinho de micro formatos (microformats) e, claro, já ter “contato” com o desenvolvimento para web,
preferencialmente com alguns websites já feitos.

2
ALGUNS DIREITOS RESERVADOS
Esta apostila é registrada pela CREATIVE COMONS Atribuição 2.5 Brasil, que diz o
seguinte:
Você pode:
● copiar, distribuir, exibir, executar a obra
● criar obras derivadas
Sob as seguintes condições:
Atribuição: você deve dar crédito ao autor original, da

forma especificada pelo autor ou licenciante
● Para cada novo uso ou distribuição, você deve deixar claro para outros os
termos da licença desta obra
● Qualquer uma destas condições podem ser renunciadas, desde que você
obtenha permissão do autor
Ou seja, você pode fazer quantas cópias da apostila quiser e repassar para quantas
pessoas quiser, mostrar para quem quiser em qualquer lugar que desejar. Pode,
inclusive, fazer uma apostila derivada, livro, manual, ou qualquer outra coisa
baseada nos escritos que aqui constam, DESDE QUE você cite que os textos
“originais” são da autoria de Tárcio Zemel (no caso, eu).
Ah, só para constar nos “autos”, eu fiz esta apostila em ambiente Linux:
● Kurumin 7 kernel 2.6.18 (SO)
● Quanta+ 3.3.2 (códigos)
● Konqueror 3.5.5 (testes)
● BrOffice.org 2.0 (textos)

3
4
SUMÁRIO
W3C.............................................................................................................................................................10
DESENVOLVIMENTO EM CAMADAS...............................................................................................11
MARCAÇÃO x ESTILO........................................................................................................................12
O QUE É CSS?...........................................................................................................................................13
VANTAGENS EM SE USAR CSS...........................................................................................................15
SEPARAÇÃO DAS CAMADAS DE DESENVOLVIMENTO............................................................15
WEBSITES MAIS LEVES.....................................................................................................................15
CONTROLE TOTAL SOBRE O LAYOUT..........................................................................................16
DIFERENTES ESTILOS PARA DIFERENTES MÍDIAS....................................................................16
FUNDAMENTOS DE CSS.......................................................................................................................20
COMO ESCREVER CSS (SINTAXE)...................................................................................................20
Regras.................................................................................................................................................20
Agrupamento......................................................................................................................................23
Efeito Cascata.....................................................................................................................................23
Herança...............................................................................................................................................24
Seletores ID e Classe..........................................................................................................................26
id....................................................................................................................................................26
classe..............................................................................................................................................27
Div e Span..........................................................................................................................................28
div..................................................................................................................................................28
span................................................................................................................................................29
Comentários........................................................................................................................................30
MANEIRAS DE SE INSERIR CSS.......................................................................................................31
Css Inline............................................................................................................................................31
Css Incorporado..................................................................................................................................31
Css Externo.........................................................................................................................................32
SELETORES AVANÇADOS...................................................................................................................33
SELETOR UNIVERSAL........................................................................................................................35
SELETOR ID E SELETOR CLASSE....................................................................................................36
SELETOR DESCENDENTE..................................................................................................................36
SELETOR FILHO...................................................................................................................................37
SELETOR IRMÃO ADJACENTE.........................................................................................................38
SELETORES DE ATRIBUTO...............................................................................................................39
E[att]...................................................................................................................................................39
E[att=val]............................................................................................................................................39
E[att~=val]..........................................................................................................................................39
E[att|=val]...........................................................................................................................................40
Combinação de Seletores de Atributo................................................................................................40
PSEUDO-CLASSES...............................................................................................................................41
:first-child...........................................................................................................................................41
Pseudo-classes Para Links..................................................................................................................41
:link................................................................................................................................................42
:visited............................................................................................................................................42
:hover.............................................................................................................................................42
:active.............................................................................................................................................43
atenção com as pseudo-classes para links......................................................................................43
:focus..............................................................................................................................................44
:lang....................................................................................................................................................44
PSEUDO-ELEMENTOS........................................................................................................................44
:first-line.............................................................................................................................................45

5
:first-letter...........................................................................................................................................45
:before e :after.....................................................................................................................................46
COMPATIBILIDADE............................................................................................................................46
DICAS GERAIS.........................................................................................................................................51
TESTAR EM VÁRIOS NAVEGADORES............................................................................................51
COMENTÁRIOS CONDICIONAIS......................................................................................................52
!important................................................................................................................................................55
SEMÂNTICA..........................................................................................................................................55
LINKS.........................................................................................................................................................57
GERAL....................................................................................................................................................57
BLOGS....................................................................................................................................................58
CONCLUSÃO............................................................................................................................................59

6
7
CAPÍTULO 1
INTRODUÇÃO
Neste capítulo apresento algumas questões

essencialmente teóricas, sem apresentar a
codificação CSS. Abordo temas como W3C,
desenvolvimento em camadas e algumas
vantagens em se usar as folhas de estilo.

8
9
W3C
Para explicar o que é o W3C, mesmo que rapidamente, tomarei emprestadas as
palavras de Maurício Samy Silva, o “Maujor”2, em tradução feita em 08 de janeiro
de 2005, do FAQ sobre web standards do Web Standards Project:
O World Wide Web Consortium (W3C) é um consórcio de âmbito internacional

dedicado a "conduzir a Web ao seu pleno potencial". É dirigida por Tim
Berners-Lee, o inventor da Web. Fundado em 1994, o W3C tem mais de 400
organizações membro incluindo aí a Microsoft, America Online (proprietária da
Netscape Communications), Apple Computer, [...] Sun Microsystems, e uma
vasta gama de fabricantes de hardware e software, fornecedores de
conteúdos, instituições acadêmicas e companhias de telecomunicações. O
Consórcio está hospedado em três instituições de pesquisas - - MIT nos EUA,
INRIA na Europa e Keio University no Japão.
Ainda no mesmo documento, é apresentada uma explicação sobre o que

exatamente o W3C faz:
O W3C desenvolve especificações abertas (de facto standards) para aumentar

a interoperabilidade dos produtos para Web. As Recomendações do W3C são
desenvolvidas por grupos de trabalho formados por membros do Consórcio e
experts convidados. Os grupos de trabalho criam esboços e propostas de
recomendações , baseados em um consenso comum de companhias e
organizações interessadas na criação de aplicações Web. Estas são então
submetidas à apreciação dos membros do W3C e seu diretor para aprovação
formal como uma Recomendação. [...] (sic)
Ou seja, o W3C faz recomendações a respeito de tecnologias, métodos e técnicas

de produção para o ambiente online, indica o que deve e o que não deve ser feito
e/ou utilizado, em se tratando de desenvolvimento para web (dentre outras coisas).
Mesmo sem ainda ter explicado o que é CSS (Cascading Style Sheet), ou, como
prefiro, folha de estilo em cascata (ou, simplesmente, folha de estilo), adianto que
é uma tecnologia aprovada e recomendada pelo W3C.
2 http://www.maujor.com/

10
DESENVOLVIMENTO EM CAMADAS
O desenvolvimento em camadas é um conceito originalmente convencionado para o
desenvolvimento de softwares, mas, em se tratando de desenvolvimento para web,
quer dizer que há a separação do conteúdo, apresentação e comportamento
no momento da feitura de um website3.
Por camada de conteúdo, entende-se que seja as informações que o website

contém: são os textos, informações, notas, cabeçalhos, desenvolvimentos,
análises, avaliações, enfim, toda a “parte escrita”, seu conteúdo (incluindo-se aí
listagens, links, tabelas e gráficos).
A camada de apresentação refere-se ao modo como o que consta na camada de

conteúdo vai ser mostrado, apresentado. Aqui são definidas as cores e tamanhos
de links e textos e especificados os locais em que estes vão constar; é onde se
coloca uma listagem à esquerda ou direita, onde se especifica um plano de fundo,
onde se escolhe em qual posição uma imagem irá aparecer.
Na camada de comportamento alguns “efeitos” são postos às páginas para

conferir interatividade/dinamismo às mesmas, ou seja, como determinados
elementos e estruturas vão se comportar. É aqui a etapa onde se define que uma
janela popup aparecerá ao se clicar em um link; é aqui onde se define que ao se
passar o ponteiro do mouse em um elemento, este irá se expandir e apresentar
informações adicionais4.
Perceba como isso é prático, poupa tempo e oferece autonomia aos diferentes
estágios de produção de um website. Por exemplo: o responsável pela camada de
conteúdo precisa elaborar um formulário para o cadastro de clientes;
simultaneamente, a aparência deste formulário (e da página como um todo) pode
ser feita por outro desenvolvedor. Um não precisa esperar o término do trabalho do
outro (muito menos ficam mutuamente “dependentes”), pelo contrário, ambos
executam suas respectivas tarefas concomitantemente, poupando tempo e
3 E não somente a websites; o mesmo deve ser aplicado para minisites, hotsites, portais, sistemas de conteúdo interativo-
dinâmico e quaisquer outros que sejam feitos aos moldes de “página da internet”.
4 Ou seja, esta é a camada que recebe um javascript, um vbscript, uma aplicação em AJAX (embora alguns
desenvolvedores entendam que o AJAX é posto em uma “quarta camada”).

11
maximizando a produção, como um todo e, caso alguma alteração/atualização
precise ser realizada, pode-se alterar o que foi feito em cada camada
separadamente, sem interferir em nada o conteúdo de outra.
MARCAÇÃO x ESTILO
Com base na explicação do conceito de desenvolvimento em camadas, vou
apresentar algumas considerações “mais práticas”.
A camada de conteúdo, “tecnicamente” falando, é onde se insere o (X)HTML. E esta

tecnologia foi justamente idealizada para esse fim. O significado destas letras seria
algo como “linguagem de marcação de hipertexto”. E gostaria que você desse
especial importância à palavra “marcação”.
Através das tags (X)HTML podemos especificar o que é um título primário ou

cabeçalho, o que é um parágrafo, onde haverá uma quebra de linha num texto, o
que é uma lista, uma citação de algum autor, quando um elemento deve aparecer
em negrito ou itálico, enfim, dentro das limitações desta tecnologia, tem-se tudo o
que é necessário para a construção de páginas para a web.
Uma explicação que pode aclarar o que estou querendo dizer é a seguinte: quando
um desenvolvedor está especificando todos estes itens, ele marca naquela página
“o quê é o quê”5. Quando ele coloca uma palavra entre as tags e , está
marcando o local onde aparecerá uma palavra em itálico em dispositivos de
renderização em tela e, ao mesmo tempo, uma palavra que receberá ênfase ao ser
lida por um sintetizador de voz, por exemplo.
E é para isso que serve o (X)HTML: nada mais, nada menos, que
marcar/estruturar os elementos que você deseja em páginas web (na camada de
conteúdo)6. O estilo (ou estilização) diz respeito à camada de aparência, ou seja,
deve ser feito com a utilização de CSS.
5 Será que usei a acentuação corretamente?

6 Na verdade existem tags que servem para estilizar elementos, como alterar a cor de uma fonte, por exemplo, mas a
abordagem que faço nesta apostila não diz respeito a técnicas antigas de desenvolvimento para web, utilizadas em épocas
em que a tecnologia das folhas de estilo ainda não havia surgido.

12
O QUE É CSS?
Depois das informações anteriormente apresentadas, vou explicar o que são as
folhas de estilo em cascata, propriamente ditas. Mas, antes, abordarei alguns
aspectos “históricos”.
Anteriormente à chegada de CSS no âmbito das tecnologias voltadas ao

desenvolvimento para web (antes de 1996), a aparência dos elementos das páginas
era especificada/controlada através de, basicamente, tags (X)HTML. Se fosse
preciso especificar, por exemplo, que os títulos principais dos documentos fossem
vermelhos e tivessem um tamanho especial, poderia se usar:
<h1>Título</h1>
Muito bem. Imagine um website com 10 ou 20 páginas, e todas elas com um título
principal. Se por algum motivo você tivesse que alterar a aparência destes títulos
(por solicitação do cliente, por exemplo), mudando a cor de vermelho para laranja,
o que precisaria ser feito? Exatamente: ir em cada marcação de título principal e
alterar a propriedade “color”, da tag “font”, para a cor necessária. É demorado e
chato, mas tudo bem... Afinal de contas, o cliente precisa disso (e,
conseqüentemente, você também).
E se, ao invés de 10 ou 20 páginas, o website tivesse 40 ou 80 páginas e a

modificação solicitada abrangesse não somente os títulos principais, mas os
secundários e terciários, além da mudança da cor de todos os links? Um pouco mais
complicado? E se houvesse um prazo para fazer isso em uma hora, pois o cliente
precisa das modificações para apresentar seu site a um sócio ou potencial
comprador?
Essa “mistura de ambientes” (conteúdo e apresentação) certamente é prejudicial

para todas as partes envolvidas na produção de páginas www. Além das variáveis
“tempo” e “paciência”, pense em “credibilidade”, “disponibilidade” e “prejuízo” (pois
tempo é dinheiro, e perda de tempo para atualizar um site e/ou poder tratar a
feitura de um novo, é perda de dinheiro).

13
No exemplo acima citado, utilizando CSS o trabalho de alteração de todos os títulos
primários, secundários e terciários e links das páginas poderia ter sido realizado em
poucos minutos7 (com o estudo dos tópicos subseqüentes, será possível entender
como). Seria possível, para o desenvolvedor, realizar o trabalho muito antes do
prazo estabelecido terminar, sem que, com isso, ele tivesse uma crise de nervos e
paciência. Com isso, ele poderia concentrar seus esforços na feitura ou manutenção
do site de outro cliente (ou conseguir outro trabalho, caso não tivesse mais páginas
para mexer8).
Mas a experiência deste caótico exemplo que apresentei não precisa ser vivenciada
por nenhum desenvolvedor, caso este escolha adotar o desenvolvimento em
camadas e separar totalmente o conteúdo da apresentação nas páginas que faz.
Foi para melhorar a vida/trabalho dos desenvolvedores (e clientes) que as folhas de

estilo foram idealizadas e sua tecnologia desenvolvida! É através delas que,
atualmente, pode-se realizar um trabalho mais consistente, profissional, moderno e
mais facilmente manutenível.
Respondendo à pergunta do presente tópico, CSS, ou folha de estilo em

cascata, é um arquivo que contém especificações de como devem ser
exibidos (estilizados) os elementos das páginas de um website, ou seja,
tags (X)HTML9.
7 De 3 a 5, mais ou menos.
8 Melhor ainda: assistir a um anime! (-;
9 E, de novo, seu “ancestral” é o desenvolvimento de softwares. Por exemplo: em um editor de texto estilo M$ Word,
BrOffice, etc, como você acha que, quando você especifica que um bloco de texto é um parágrafo, ele altera sua
aparência segundo um estilo pré-especificado?

14
VANTAGENS EM SE USAR CSS
Este tópico serve para aqueles cujo significado, importância e utilidade das folhas
de estilo ainda não tenha ficado suficientemente claros. Talvez eu até ajude os mais
experientes a recordar de algumas coisas. (-;
SEPARAÇÃO DAS CAMADAS DE DESENVOLVIMENTO10

Como já mencionado, ao se utilizar as folhas de estilo, a proposta da separação de
todo o material em camadas pode ser cumprida.
Enquanto a camada de conteúdo vai sendo codificada em (X)HTML, a camada de

apresentação, por sua vez, vai sendo feita de forma separada e totalmente
independente, via CSS11.
E isso pode (e, preferencialmente, deve) ser feito por pessoas ou equipes
diferenciadas, com qualificação especial para as diferentes tarefas, poupando
tempo e aumentando a produtividade do grupo ou empresa (aumentando, dessa
forma, a lucratividade e poupando tempo).
WEBSITES MAIS LEVES

Pelo fato de se utilizar a separação em camadas (e, conseqüentemente, a
apresentação das páginas ficar especificada em um arquivo à parte), a largura de
banda fica reduzida, e isso acarreta em diminuição de custos12.
Via CSS, é possível criar efeitos sofisticados/arrojados, anteriormente só alcançados

com a utilização de tecnologias como Java e Javascript , que são mais “pesadas”.
10 É, estou dando ênfase a essa questão! Quando conheci este método de produção fiquei tão perplexo com suas vantagens
(e atrocidades que cometia na utilização do “antigo método”), que isso não poderia ser de outra forma. Tomara que todo
aquele que está iniciando na carreira de desenvolvedor web tenha a “sorte” de já começar trabalhando com separação de
camadas!
11 Caso essa independência toda a qual me refiro constantemente ainda não tenha sido aclarada, imagine que você pode
alterar TODA a aparência do website sem alterar sequer 1 caracter na camada de conteúdo. Uma empresa, por exemplo,
pode alterar a aparência de sua loja virtual conforme datas comemorativas: no natal, as páginas conterão flocos de neve
e sacos de presente, na páscoa, a televisão será ofertada em um “ambiente achocolatado”. Recomendo que visite
http://www.csszengarden.com/ .
12 Alguém sempre paga pelo consumo de banda...

15
CONTROLE TOTAL SOBRE O LAYOUT
Há um antiquado método de estruturação do layout de websites: ele apregoa que
gráficos e a disposição dos elementos que compõem as páginas devem ser
“montados” utilizando-se tabelas e “remendando” possíveis falhas de estruturação
com o advento de pequenas imagens ocultas (os famosos “gifs transparentes”).
Caso seja necessário alterar, por exemplo, a posição de um menu que está na
esquerda, para a direita, lá se vão horas, dias, semanas de “trabalho braçal”,
dependendo do tamanho do website; essa tarefa pode até ser feita mais
rapidamente utilizando-se templates de editores WYSIWYG13, no entanto, alguns
poluem tanto o código-fonte que fica quase que literalmente impossível prestar
algum tipo de manutenção futura.
Quando se utiliza as folhas de estilo para a estruturação de layouts, esse problema

desaparece! Um menu pode ser deslocado de um lado para outro da página com a
mesma rapidez que se altera a cor de todos seus textos: poucos minutos!
DIFERENTES ESTILOS PARA DIFERENTES MÍDIAS

Com as folhas de estilo é possível especificar estilos (aparências) diferenciados para
diversos tipos de mídia, tais como o monitor, webTV, handheld, dispositivos braile,
dentre outros.
Além disso, utilizando determinadas técnicas CSS, pode-se fazer um site cujo
layout seja adaptável a qualquer resolução de tela, terminando com o clássico
problema de reprodução de páginas para diferentes resoluções e controle destas via
scripts incorporados.
E mais: mesmo que alguém esteja navegando com a exibição de estilos e/ou
imagens desativada, ou mesmo através de browsers com suporte a somente textos
(tais como o Lynx), o conteúdo do site, na íntegra, pode ser visualizado.
13 Exemplos de editores WYSIWYG: Quanta+, Bluefish, Dreamweaver, HTML-Kit, NVU, HTMLGate Free...

16
17
CAPÍTULO 2
CODIFICAÇÃO CSS
Neste capítulo abordarei a codificação CSS,

propriamente dita. Apresentarei desde a
sintaxe básica e formas de inserção (“tipos” de
CSS) até chegar aos seletores avançados.

18
19
FUNDAMENTOS DE CSS
Antes de passar ao estudo de como efetivamente estilizar os elementos de um
website, é extremamente necessária mais uma parte teórica.
Os conceitos que apresentarei a seguir são a base para o entendimento de todas as

maneiras e técnicas de utilização de CSS, portanto, devem ser estudadas
minuciosamente a fim de se entender o tema de forma satisfatória.
Frisando: grande parte do que apresento aqui é, na verdade, uma compilação de

outros materiais que encontrei em apostilas virtuais e websites. Conforme o texto
prossiga, prestarei os merecidos créditos.
COMO ESCREVER CSS (SINTAXE)14

Todas as linguagens de marcação e programação devem ser norteadas por
convenções, regras de escrita, sem as quais sua efetiva aplicação não seria
possível. De igual maneira, para as folhas de estilo em cascata foram estipuladas
convenções, tratados, formas para que a padronização de sua codificação fosse
possível.
Essas regras, esses “padrões de escrita”, essas convenções, podem ser chamadas
sintaxe, e é através dela que se pode escrever códigos em CSS (e nas linguagens
de programação/marcação, também)15.
Regras
Segundo o que consta na documentação oficial do W3C “Folhas de Estilo CSS, nível
1”, de 17 de dezembro de 1996, revisada em 11 de janeiro de 199916, “uma regra é
composta de duas partes principais: um selector (sic) [...] e uma declaração [...].
Por sua vez, esta declaração também possui duas partes: uma propriedade [...] e
seu valor [...]”.
14 Para os estudos a seguir, o foco será para CSS externo. Se não souber o que é isso, calma, mais à frente será explicado.
15 Atenção: esta palavra apresenta diferentes significações, dependendo do contexto e área em que é usada.
16 http://www.w3.org/TR/1999/REC-CSS1-19990111

20
Ou seja, ao se codificar as folhas de estilo em cascata se está falando,
tecnicamente, em manipulação de regras. E estas regras, por sua vez, são
compostas por 3 partes: seletor, propriedade e valor.
Portanto, a sintaxe genérica de uma declaração CSS simples é a seguinte:
seletor { propriedade: valor; }
Na qual:
seletor representa, em um primeiro momento, as tags (X)HTML, tais como

parágrafos (p) e títulos primários (h1), e, em um segundo momento, divs, spans,
ids, classes e pseudo-elementos (que serão explicados posteriormente).
propriedade assumindo “parâmetros” que podem ser controlados através das

folhas de estilo, ou, praticamente falando, o atributo do seletor que será
modificado.
valor como, nas palavras de Maurício Samy Silva, o Maujor17, a “característica

específica a ser assumida pela propriedade”.
E, através da “fórmula” acima, também pode-se observar mais algumas questões a

respeito da sintaxe: logo após a declaração do seletor, as propriedades escolhidas
devem ser postas entre chaves (“{” e “}”) e, seu(s) respectivo(s) valor(es),
declarado(s) logo após dois-pontos (“:”) e finalizado(s)/separado(s) com um ponto-
e-vírgula(“;”).
Ficou um pouco confuso depois da explicação? Basta olhar novamente (e quantas

vezes forem necessárias) a fórmula e ficar atento aos exemplos a seguir.
Se eu quiser que a cor da letra de todos os parágrafos do website sejam de uma

cor azul, uso o seguinte:

21
p { color: #369; }
Repetindo: eu quero que todos os parágrafos (p) tenha uma cor (color) azul (#369).
Perceba que especifiquei a cor através da codificação hexadecimal18.
Depois disso, se revolver definir um tamanho para as letras, acrescentaria:
p { color: #369; font-size: 14px; }
Está ficando mais claro, agora? Assim como toda área de conhecimento a ser
aprendida, inicialmente pode ser que pareça muito difícil e complexo, entretanto,
com o passar do tempo e continuidade no estudo, tudo vai ficando melhor19.
Aconselho que, em regras em que o seletor possua várias propriedades, você

organize a codificação da seguinte maneira:
p {
color: #369;
font-size: 14px;
}
Tanto a primeira regra, quanto esta, funcionarão de igual maneira e perfeitamente,

no entanto, quando se opta pela segunda maneira, seu código fica mais legível e
você conseguirá ter mais facilidade em prestar manutenções necessárias20.
Mesmo se isso não fizer sentido pra você, agora, saiba do seguinte: uma folha de
estilos para um website relativamente pequeno e simples, de 8 ou 10 páginas, pode
facilmente ultrapassar 80 regras. E, claro, nem a metade delas terá apenas uma
propriedade. Inclusive, em algumas, são necessárias mais de 10! Pense nisso.
Outra coisa: na verdade, para a declaração da última propriedade de uma regra,

não é necessário que se coloque o ponto-e-vírgula (“;”); entretanto, aconselho que
você faça isso. A experiência mostra que é muito fácil, depois de se inserir uma
nova propriedade ao final de uma regra, esquecer-se de incluir o ponto e vírgula na
(agora) penúltima propriedade, o que acarreta em erros em sua estilização.
18 Faça uma pesquisa a respeito, caso não saiba o que é isso.
19 Esse foi o “momento consolo”. (-:
20 Algumas pessoas (dentre as quais eu me incluo) costumam estabelecer critérios para a inserção das propriedades, como
ordem alfabética, por exemplo.

22
Agrupamento21
Pode ser que você queira especificar as mesmas propriedades para seletores
diferentes. Neste caso, é possível que você o faça declarando tão-somente uma
regra, separando os seletores por vírgula (“,”). Se, por exemplo, quiser que os
textos dos parágrafos e os títulos secundário e terciário sejam de uma cor
vermelha, poderia usar o seguinte:
p, h2, h3 { color: #F00; }
Efeito Cascata
Se ainda não se perguntou o motivo desse nome doido que é “folha de estilo em
cascata”, a hora é agora. Afinal, eles não batizariam uma tecnologia tão
importante de forma a não representar nada, não é verdade? Esse “cascata” no
nome, remete a algo muitíssimo importante: o método pelo qual “conflitos” entre
regras são tratados. “Palma, palma, não priemos cânico”™!
Quando temos um documento com várias regras CSS, acontece de determinadas

regras terem um “peso” a mais, em detrimento de outras; serem mais específicas
ou, como dizem alguns, mais importantes. E, no momento de interpretar um código
CSS, o renderizador deve saber qual é o peso de cada declaração, e como as regras
se interrelacionam-se entre si22.
Há uma ordem pré-estabelecida para o “ efeito cascata”, que é a seguinte23:
1. Localizadas todas as regras aplicáveis ao seletor/propriedade, determina-se a

especificidade de cada uma delas. A regra mais especifica entre as
conflitantes será aplicada. Se não for encontrada uma (ou mais) regra
aplicável ao elemento (X)HTML, este herdará as propriedades de estilo de seu
elemento pai. Não havendo elemento pai será aplicado o valor inicial default
de estilo para aquele elemento
2. Regras com declaração importante (!important) tem prioridade sobre aquelas
21 Alguns chamam de “grupamento”. E agora, qual é correto? Ahhh, vou deixar assim, mesmo...
22 Uma oração bem filosófica, hã?
23 Extraído do FAQ sobre CSS da página do Maujor (http://www.maujor.com/), com ligeiras modificações.

23
sem a declaração. Se o autor e o usuário declaram regras conflitantes com
!important, as do usuário têm prioridade sobre as do autor24
3. Regras com mesmo peso (sem !important) e conflitantes, declaradas pelo

autor, têm prioridade sobre aquelas declaradas pelo usuário. Regras do
usuário com maior especificidade que aquelas do autor, têm a prioridade.
Regras com igual especificidade declaradas pelo autor têm prioridade sobre as
do usuário. Regras do autor e do usuário têm prioridade sobre as regras
default das aplicações do usuário (ex.: o browser)
4. Regras mais específicas têm a prioridade sobre as menos específicas
5. Entre regras de mesmo peso, têm prioridade aquelas declaradas por último
na sequência das regras na folha de estilos
6. Folhas de estilo inline, incorporadas, lincadas e importadas (@import), nesta

ordem, têm do maior para o menor peso (estilos inline têm o maior peso).
Entre várias folhas de estilo lincadas têm maior prioridade aquela importada
por último (mais próxima da tag “head”). O mesmo ocorre entre as folhas
importadas (@import)25
Herança
Um outro significado para “cascata”, na significação de CSS (“folha de estilo em

cascata”), seria herança.
Em CSS, os seletores são tratados como membros de uma família hierarquicamente

organizada. Há pais, filhos, netos, irmãos, etc. Mais ou menos como na “vida real”,
os descendentes herdam os atributos de seus ascendentes.
Observe o seguinte trecho de código XHTML:
24 O !important será explicado em outra parte da apostila

25 O “@import” não será explicado nesta apostila... Faça uma pesquisa para saber mais a respeito.

24
<body>

Este é o nosso mundo, o que é demais nunca é o bastante,
 
A primeira vez: sempre a última chance, 
Ninguém vê onde chegamos: 
Os assassinos estão livres, nós não
estamos

</body>
De acordo com a “metodologia CSS”, pelo fato de a tag strong estar “dentro” da
tag p, ela é sua descendente direta, sua filha (ou filho, se preferir); por sua vez, a
tag p é filha de body (conseqüentemente, strong é neta de body). Logo, temos a
seguinte hierarquia nas gerações desta família: body -> p -> strong.
Pelo que foi exposto a pouco, se você especificar que body terá suas letras de uma
cor azul e pertencer a uma família de fontes serifadas, automaticamente estará
especificando que sua filha, p, e sua neta, strong, terão a mesma cor e serifa.
Lembre-se de que os descendentes herdam os atributos de seus respectivos

ascendentes.
Assim como na vida real, os descendentes não necessariamente precisam carregar

consigo todas as características de seus ascendentes. Basta querer mudar! Se for
preciso que strong tenha uma cor diferenciada da de sua mãe e avó, não há
problemas quanto a isso. Observe:
body {
color: #00F;
font-family: serif;
}
strong { color: #0F0; }
Com isso, body e p terão suas letras com uma cor azul e sua fonte pertencente à
uma família de fontes serifadas e, strong, uma cor verde (e continuará com o

25
mesmo tipo de fonte de seus ascendentes, já que nenhuma propriedade que diga o
contrário foi declarada).
Seletores ID e Classe
Há duas propriedades que elevam bastante as potencialidades das folhas de estilo:

classe (class) e identificador (id). Elas permitem que você aproveite mais o que as
folhas de estilo têm a oferecer.
id
Os seletores ID são representados por uma tralha (#). Sua função é estilizar um
elemento que tenha um nome em especial, e atente-se à expressão “um
elemento”, pois não pode haver IDs com nomes iguais numa mesma página, ou
seja, um ID deve ser exclusivo, individual, singular, ou quaisquer outras
expressões redundantes que indiquem seu caráter único em um documento.
Veja um exemplo de seletor ID:
#paragrafoDestaque {
color: #F00;
font-size: 120%;
}
Portanto, em uma página (ou conjunto de páginas) que receberá(ão) esta

estilização, poderá haver somente um “parágrafo destaque”, e seria algo como:
Este é um texto com destaque!
Perceba que, na hora de especificar a qual ID um elemento pertence, não é

necessário incluir a tralha (#), basta colocar seu nome.
Também pode haver a presença de IDs nas hierarquias “mais profundas” dos
elementos das páginas. Algo como:
p a em#maior { font-size: 150%; }

26
Perceba que a regra que acaba de ser apresentada surtirá efeito somente em uma
tag em de ID “maior”, que esteja presente em um link (a) dentro de um parágrafo
(p)26:
Para maiores informações, acesse o <a

href=“http://www.w3c.org/” title=“ir para o site do W3C” rel=“external”>site
da World Wide Web Consortium</a>!
classe
Diferentemente dos IDs, as classes podem ser atribuídas a elementos diferentes

na(s) página(s) de um website.
Pode-se, por exemplo, especificar que haverá dois tipos de parágrafo em seu
website: um com a fonte de uma cor vermelha e família de fontes com serifa e
outro com a fonte de uma cor verde e família de fontes sem serifa. Para facilitar o
entendimento, vou apresentar um exemplo:
p.vermelho {
color: #F00;
font-family: serif;
}
p.verde {
color: #0F0;
font-family: sans-serif;
}
Fique atendo à sintaxe: após a declaração do seletor, há um ponto (“.”) e, logo

depois, o nome escolhido.
Com isso, estabeleci duas regras, ou, poderia se dizer, duas classes de parágrafo.
Agora, minha folha de estilo possui uma classe de parágrafo de nome “vermelho” e
outra de nome “verde”, cada uma delas com diferentes propriedades e, por
conseqüência, realizará diferentes estilizações.
26 Este tipo de regra será mais bem explicada um pouco à frente.

27
Em algum momento do texto, caso eu queira me valer das respectivas classes,
basta inserir seus nomes com a propriedade class na tag p. Veja:
primeiro parágrafo
segundo parágrafo
terceiro parágrafo
quarto parágrafo
quinto parágrafo
Perceba até que ponto as classes podem ser úteis: se eu declaro uma “classe
genérica”, ou seja, que não pertença a nenhum seletor (X)HTML específico, posso
usá-la em qualquer tag. Exemplo:
.azul { color: #00F; }
Agora posso utilizar isso da seguinte maneira:
<h1 class=”azul”>Teste</h1>
primeiro parágrafo do teste.
segundo parágrafo do teste.
Viu? Quando crio uma classe genérica posso utilizá-la em qualquer tag que queira,
conseguindo os resultados pretendidos.
Div e Span
DIV e SPAN são duas tags (X)HTML comuns. Com elas, é possível que se estenda
as possibilidades de estilização numa folha de estilos.
div
Essa tag, quando usada em um documento puro (X)HTML, na verdade, faz nada!
Por outro lado, quando nos valemos de uma estilização CSS, podemos aproveitar, e
muito, essa divisão feita no código, criando regras a partir de IDs e classes em
DIVs. Observe esse código XHTML:

28
<div>
Este é um parágrafo normal, dentro de uma DIV.
</div>
No momento da renderização, aparecerá somente um texto puro, mesmo.
Observe, então, como podemos fazer para aplicar um estilo personalizado, apenas
atribuindo um ID para a DIV em questão. O XHTML ficaria assim:
<div id=“personalizado”>
Este é um parágrafo normal, dentro de uma DIV.
</div>
E o CSS:
#personalizado {
background-color: #396;
border: 3px double #369;
color: #FFF;
padding: 5px;
width: 40%;
}
Perceba: com a estilização do trecho XHTML por essa regra CSS, a DIV que, até
então, não tinha muito “utilidade”, transforma-se em um poderoso meio para
estilizar páginas e compor layouts.
span
O SPAN é como se fosse “uma DIV em miniatura”. A DIV, que é a divisão que se
pode fazer em páginas (X)HTML, é como se fosse de abrangência maior, ou seja,
usa-se o SPAN para estilizar pequeninos trechos em seu código de marcação. O
princípio de aplicação é o mesmo, podendo, os SPANs, serem estilizados quando,
para eles, se atribui um ID ou classe. Olha o XHTML:
Com SPANS, pode-se 

estilizar pequenos trechos de código!

29
Com o seguinte CSS:
.spanDoido {
background-color: #F00;
color: #FFF;
margin-bottom: 5px;
padding: 2px;
}
É com o uso de SPANs que se pode, por exemplo, especificar que determinada
palavra ou frase, num documento (X)HTML, é de outro idioma, o que facilita
bastante a vida de quem precisa de um sintetizador de voz para navegar pela web:
Campanha de saúde pública: "Microsoft

, nem morto"!
Comentários
Para facilitar o entendimento futuro de um código que está sendo escrito, é possível
que se comente suas folhas de estilo, ou seja, você pode, nos pontos que achar
conveniente, digitar textos, para si mesmo ou outras pessoas, com explicações,
conceitos, idéia, planos de implementação futura, trechos de código que precisem
ser isolados para testes, ou qualquer outra coisa que quiser.
E, ao fazer isso, suas estilizações não serão prejudicadas, já que quando algum tipo
de mídia interpreta um arquivo .css, “desconsidera” o que está comentado, quer
dizer, não toma aquele trecho como se fosse alguma intenção de declarar uma
regra, ou algo do tipo.
Os comentários, em CSS, vêm envoltos entre o par de caracteres barra-asterisco

(“/*”), asterisco-barra (“*/”).
Isto quer dizer que tudo aquilo que estiver entre este par de caracteres não será
interpretado na hora da “montagem” das estilizações. Ó:

30
h2 { font-size: 120%; }
/*
estou fazendo um comentário em meu arquivo CSS,
e ele pode, inclusive, ter quantas linhas eu quiser
*/
p { color: #FF0; }
MANEIRAS DE SE INSERIR CSS

Basicamente, há 3 maneiras de se inserir CSS em um documento: inserção inline,
inserção no próprio documento e “chamar” uma folha externa (respectivamente
chamados de “CSS inline”, “CSS incorporado” e “CSS externo”).
Css Inline
Para se inserir um CSS inline, o esquema é colocar as declarações como se fossem

valores da propriedade (X)HTML “style”. Exemplo:
CSS!
Pôde-se perceber o motivo pelo qual esse tipo de CSS não é o mais usado: não há
tanta flexibilidade para a realização de alterações, haja vista que a regra aplica-se
somente ao elemento que recebeu a estilização.
Css Incorporado
Para esse tipo de CSS, as regras são colocadas no próprio documento, na tag
“head”. Sua abrangência é tão-somente a própria página em que estão inseridas,
ou seja, possui um grau mediano de flexibilidade, já que potenciais alterações
aplicar-se-ão ao documento atual, e a nenhum outro. A sintaxe é a seguinte:
<head>
<style type=“text/css”>
[regras CSS]
<style>
</head>

31
Css Externo
Esse é o tipo de inserção de CSS mais usado. Nessa modalidade, as regras CSS são
escritas em um arquivo à parte do (X)HTML e “chamados” para as estilizações.
Você pode preparar as regras até em editores de texto simples, como KEdit ou
Bloco de Notas. A única observação é não se esquecer de salvar o arquivo com a
extensão “.css”.
É no CSS externo que o verdadeiro poder está! Hááá!
Já que todos os documentos (X)HTML de seu website estarão chamando a mesma

folha de estilos, se precisar fazer alguma alteração em CSS, basta editar seu
arquivinho que, na mesma hora, as mudanças se aplicarão ao site por completo27!
Basta colocar o seguinte, na tag “head” dos documentos:
<link rel="stylesheet" type="text/css" href="nomeDaSuaFolhaDeEstilos.css" />
27 Agora acredita no que está escrito na página 14?

32
SELETORES AVANÇADOS
Lembra-se do exemplo da “família CSS”28? Em CSS existem “seletores especiais”
para que haja um maior controle do desenvolvedor quando este precisa trabalhar
com estilizações mais específicas, facilitando o desenvolvimento em geral.
Antes de entrar um pouco mais a fundo no assunto, cabe mostrar um pequeno

conceito sobre os principais “graus de parentesco” entre elementos que recebem
estilização. Observe a tabela:
ELEMENTO EXPLICAÇÃO
descendente elemento que seja filho, neto, bisneto (e assim por
diante) de outro elemento, dentro da hierarquia
presente na página
ascendente (ou ancestral) elemento que seja pai, avô, bisavô (e assim por
diante) de outro elemento, dentro da hierarquia
presente na página
pai elemento imediatamente anterior a outro, dentro da
hierarquia presente na página
filho elemento imediatamente posterior a outro, dentro da
hierarquia presente na página
irmão elemento “adjacente” a outro, dentro da hierarquia
presente na página; ambos filhos do mesmo pai
Só para exemplificar, novamente:

Vocês esperam uma intervenção divina 
Mas não sabem que o tempo agora está contra vocês, 
Vocês se perdem no meio de tanto medo, 
De não conseguir dinheiro pra comprar sem se vender

No caso, o parágrafo () é filho de <body> (e, conseqüentemente, <body> é seu

pai) e as tags , suas netas. Por falar nelas, reparem que são irmãs (filhas do
mesmo pai: ).
28 Página 24.

33
Perceba quantas relações de hierarquia (ou parentesco, se preferir) existem em um
simples pequeno parágrafo. Pense em quantos tatatataranetos podem existir em
um documento mais complexo. Por esse motivo é de essencial importância que se
preste bastante atenção ao conceitos deste tópico e, importantíssimo, que se
pratique imediatamente e que se faça testeS29 de tudo o que se vai lendo por aqui.
Muito bem, agora observe esta tabela30 que mostra a sintaxe genérica das relações
hierárquicas que podem ser usadas com as folhas de estilo:
SELETOR FORMATO DESCRIÇÃO

universal * relacionado a qualquer elemento
tipo E relacionado ao elemento “E”
relacionado a qualquer elemento cuja classe
classe .info
seja “info”
id #teste relacionado ao elemento de id “teste”
relacionado a qualquer elemento “F” que seja
descendente EF
descendente do elemento “E”
relacionado a qualquer elemento “F” que seja
filho E>F
filho do elemento “E”
relacionado a qualquer elemento “F” que siga
irmão adjacente E+F
imediatamente ao elemento “E”
relacionado a qualquer elemento “E” que tenha
atributo E[att] um atributo “att”, independente do valor deste
atributo
atributo E[att=val]
um atributo “att” de valor igual a “val”
um atributo “att” de valor igual a um valor
atributo E[att~=val]
qualquer separado por um espaço de um valor
igual a “val”
um atributo “att” de valor igual a um valor
atributo E[att|=val]
qualquer separado por um hífen de um valor
começando com “val”
pseudo-classe relacionado ao elemento “E” que for o primeiro
E:first-child
:first-child filho do seu elemento pai
pseudo-classe E:link relacionado a link ainda não visitado (:link) ou
29 Com “S”, mesmo, para enfatizar que devem ser muitosss!

30 Adaptada da tradução feita pelo Maujor (http://www.maujor.com/) do artigo “CSS2.1 selectors”, de Roger Johansson
(http://www.456bereastreet.com/).

34
link E:visited com link já visitado (:visited).
E:hover
pseudo-classes relacionado a “E” quando de uma ação do
E:focus
dinâmicas usuário
E:active
pseudo-classe
E:lang(c) relacionado a elementos “E” escritos no idioma c
:language
pseudo-elemento
E:first-line relacionado à primeira linha do elemento “E”
:first-line
pseudo-elemento
E:first-letter relacionado à primeira letra do elemento “E”
:first-letter
pseudo-elementos E:before usado para gerar conteúdo antes ou depois do
:before e :after E:after conteúdo do elemento “E”
SELETOR UNIVERSAL
O seletor universal é representado por um asterisco (*), e relaciona-se com
qualquer elemento presente no(s) documento(s). Para facilitar a fixação, basta
associá-lo ao caracter curinga “*”, usado para se fazer buscas em arquivos do
computador.
Quando, em uma folha de estilos, representamos, por exemplo,
.info { color: #F00; }
pode-se considerar que o que está posto é
*.info { color: #F00; }
Pois este é o elemento “universal”, ou seja, querendo ou não, antecede todos os

outros.
Perceba que, em virtude da herança31, caso se especifique alguma estilização para

o seletor universal, isto será herdado por todos os outros elementos do
documento.
Tenha bom senso e seja cuidadoso(a) ao utilizá-lo!
31 Página 24.

35
SELETOR ID E SELETOR CLASSE
Estes já foram explicados. Volte às páginas 26 e 27, respectivamente.
SELETOR DESCENDENTE
Como descrito na tabela das sintaxes genéricas de seletores CSS, este seletor é
relacionado a qualquer elemento que seja descendente de outro. A estilização é
feita através de seletores separados por um espaço. Veja:
ul li { font-size: 16px; }
Neste caso, todo item de lista não-ordenada terá tamanho de 16px.
Veja como é possível elaborar regras mais avançadas:
ul#teste li.info {
color: #369;
font-size: 22px;
}
Esta será aplicada a qualquer item de lista que seja da classe “info”, que esteja
dentro de uma lista não ordenada de ID “teste”.
Se as duas regras mostradas estivessem presentes na mesma folha de estilos,

qualquer item de lista não ordenada teria um tamanho de 16px, com exceção dos
que tivessem a classe “info” e estivessem dentro de uma lista não-ordenada com id
“teste”.
É um avanço nas especificações de estilo! Utilizando os seletores, as regras tornam-

se mais “refinadas” e específicas, mais elegantes e profissionais.

36
SELETOR FILHO
Como mostrado na tabela das sintaxes genéricas de seletores CSS, o seletor filho
relaciona-se a qualquer elemento que seja filho de outro. Sua estilização é feita
através de seletores separados por um sinal de “maior que” (>); o seletor pai, fica à
esquerda do sinal de maior, e, o filho, à direita. Observe o trecho XHTML:
<ul>
<li>item a</li>
<li>item b</li>
<ol>
<li>subitem alpha</li>
<li>subitem beta</li>
</ol>
<li>item c</li>
</ul>
Caso se tenha uma regra de estilização como esta:
ul > li { color:#00F; }
Ela mudará a cor da fonte somente de “item a”, “item b” e “item c”, e “subitem
alpha” e “subitem beta” não terão sua cor alterada.
Perceba que isso acontece pelo fato de as tags <li> que estão dentro da lista
ordenada não serem filhas de <ul>. Como a estilização foi feita utilizando-se o
seletor filho, é normal que isso tenha acontecido.
Caso a regra fosse feita sem o caracter “ >”, ou seja, através de simplesmente
seletor descendente, os “subitem alpha” e “subitem beta” também seriam afetados,
dado que são descentes (não-diretos) de <ul>.

37
SELETOR IRMÃO ADJACENTE
Segundo explicitado na tabela das sintaxes genéricas de seletores CSS, este seletor
é relacionado a qualquer elemento que siga imediatamente ao elemento anterior,
que deve ser o mesmo. Sua estilização é feita através de seletores separados por
um sinal de adição (+) Observe o seguinte:
Posso estilizar de uma forma mais eficiente!

Basta aprender a usar os seletores CSS!
Imagine uma regra para isso:
p + p { color: #F00; }
Com isso, somente o segundo parágrafo terá sua cor alterada, dado que é irmão
adjacente do primeiro (ambos filhos de <body>, no caso). Com isso, todos os
parágrafos, com exceção do primeiro, serão afetados pela estilização.
Se o trecho XHTML fosse:
Posso estilizar de uma forma mais eficiente!

Basta aprender a usar os seletores CSS!
É isso, aí!
O segundo e terceiro parágrafos seriam afetados pela estilização (e todos os que

vierem depois). Se se quisesse, por exemplo, que o primeiro e segundo parágrafos
não recebessem a estilização, a regra seria:
p + p + p { color: #F00; }
E todos os demais parágrafos do documento seriam de uma cor vermelha.
Não pense que há um limite fixo para a especificação de estilizações de irmãos,

filhos, descendentes ou quaisquer outros tipos de regras CSS. O limite para as
especificações de estilização são os elementos presentes no documento (e sua
imaginação).

38
SELETORES DE ATRIBUTO
Segundo explicitado na tabela das sintaxes genéricas de seletores CSS, este tipo de
seletores podem ser usados de algumas maneiras diferentes, resultando em
diferentes tipos de estilizações.
E[att]
Esta sintaxe diz respeito ao elemento “E”, de atributo “att”, independentemente do

valor deste. Exemplos:
a[rel] { font-variant: small-caps; }
No código acima, todos os links que possuírem o atributo “rel”, terão sua fonte
exibida em small-caps, que é mais ou menos como se o texto tivesse sido digitado
com o caps lock ligado.
E[att=val]
Neste caso, a sintaxe refere ao elemento “E”, que tenha o atributo “att” de valor
“val”, como, por exemplo:
p[class=citacao] {
font-size: 80%;
margin-left: 20%;
}
No caso acima, todo parágrafo que for da classe “citacao”, será exibido com a letra
com 80% de tamanho e com uma margem à esquerda de 20%.
E[att~=val]
Este tipo de seletor de atributo é bem parecido com o anterior, com a diferença de
que o valor “val” do atributo “att” não precisa necessariamente ser idêntico ao
especificado, mas precisa contê-lo. Uma aplicação útil que vejo para este tipo de
seletor é quando se especifica mais de uma classe para um elemento. Por exemplo,
se se tivesse o seguinte trecho de código CSS:

39
a[rel~=friend] {
font-size: 200%;
}
E, na página que recebe estilização, o seguinte:
<a href="http://mundop2.blogspot.com/" rel="friend co-worker">saul</a>
Neste caso, todo link em que o atributo “rel” tiver um “friend”, a estilização será
aplicada, independentemente de não haver somente ele.
E[att|=val]
Este, na verdade, não é muito encontrado nas estilizações CSS, em geral. A única
aplicação que já vi para este seletor é quando se especifica uma linguagem para
determinado trecho de código, dado que algumas contêm um hífen. Se, em um
blog, por exemplo, este CSS:
span [lang|=pt] { font-style: italic; }
estilizando este trecho:


If you're ugly, I'm ugly too 
In your eyes the sky's a different blue 

Combinação de Seletores de Atributo
É possível, também, fazer combinação de vários tipos de seletores de atributo,

como na estilização CSS:
a[rel~=friend][class=destaque] { color: #0F0; }
Aplicada ao código XHTML:
<a class=”destaque” href="http://mundop2.blogspot.com/" rel="friend co-

worker">Visitem o blog do saul!</a>

40
PSEUDO-CLASSES
A palavra “pseudo” tem origem grega, e quer dizer falso. É aquela história do
“pseudo-intelectual de miolo mole”, do Caetano, lembra-se? Enfim, em CSS, as
pseudo-classes são “falsas” classes nativas, que podem ser utilizadas de formas
bastante interessantes.
:first-child
Essa pseudo-classe refere-se ao primeiro filho de um elemento presente no

documento; o “primogênito”. Algo como o irmão mais velho preferido, que pode
fazer um monte de sacanagem com os irmãos mais novos e nada acontece (isso
não acorre no CSS, só na vida real). Exemplo:

Eu desço desta <a href=“http://solidao.net/”>solidão</a>,
disparo coisas sobre um chão de giz 
Há meros <http://devaneios.com>devaneios tolos</a> a me torturar 
Fotografias recortadas em jornais de folhas, amiúde

Se houvesse uma estilização CSS em um documento destes, como algo do tipo:
p a:first-child {
color: #F00;
font-variant: small-caps;
}
O link da palavra “solidão” seria estilizado, e, os subseqüentes, não. E mais: vale

para cada parágrafo, ou seja, no restante do documento, sempre que houver um
parágrafo e, nele, links, o primeiro deles será sempre estilizado, segundo aquela
regra.
Pseudo-classes Para Links
Apesar de não estarem juntas na tabela das sintaxes genéricas de seletores CSS,
vou tratar as pseudo-classes :link, :visited, :hover, :active e :focus de uma só vez.

41
:link
Esta pseudo-classe refere-se a links no documento que ainda não tenha sido
visitados. Um exemplo de estilização:
a:link {
color: #369;
text-decoration: underline overline;
}
Ou seja, para os links em um documento que contenha uma folha de estilos com
essa regra, eles serão de uma cor azul e sublinhados e sobrelinhados.
:visited
Esta pseudo-classe refere-se a links que já tenham sido visitados. Por exemplo:
a:visited {
color: #39C;
text-decoration: none;
}
Neste caso, os links já visitados teriam uma cor azul (mais clara que a dos links do
exemplo acima) e não seriam sublinhados nem sobrelinhados.
:hover
Quando se usa uma regra com a pseudo-classe :hover, tem-se o objetivo de

estilizar links quando o ponteiro do mouse está em cima deles. Exemplo:
a:hover {
color: #FFF;
}
No caso, quando o usuário “passa o mouse por cima” do link, ele ficará com uma
cor de fundo azul, o texto com a cor branca e sem sublinhado nem sobrelinhado.

42
:active
Essa é para quando o usuário clica no link, no exato momento em que ele faz isso.
Uma prática corriqueira, para esta pseudo-classe, é repetir o que já está em
:hover, dado que os usuários “comuns” não clicam em um link e seguram o botão;
clicam e soltam, rapidamente. Dessa forma, o estilo aparece por umas poucas
frações de segundo e é praticamente imperceptível32. Observe:
a:active {
color: #F00;
}
Quando o usuário clicar no link, seu texto ficará de uma cor vermelha e sem
sublinhado nem sobrelinhado.
atenção com as pseudo-classes para links
Em virtude do efeito cascata, deve-se, ao estilizar links com as pseudo-classes,

seguir uma ordem específica para evitar efeitos inesperados. Como bem escreveu o
Maujor33,
se você define a:hover ANTES de a:visited, esta prevalecerá sobre a:hover e

em consequência, o link visitado pela primeira vez assumirá a regra definida
em a:visited e a partir de então a:hover não mais funcionará naquele link pois
a:visited prevalecerá sobre a:hover.
Ou seja, a ordem em que as pseudo-classes para links devem estar é:
● :link
● :visited
● :hover
● :active34
32 A não ser que se especifique que o tamanho da letra vai aumentar, ou algo do tipo, que dê bastante destaque.
34 Quando utilizar, também, a pseudo-classe :focus (próxima a ser explicada), esta deve vir antes de :active.

43
:focus
Esta pseudo-classe é para quando algum elemento recebe foco, ou seja, como
escreveu o Maujor35, quando aceita eventos do teclado. É muito usado para estilizar
elementos de formulários, como os “inputs”.
input[type=“text”]:focus {
color: #FFF;
}
No caso, quando a pessoa acessar esse tipo de campo para inserção de textos, sua
cor de fundo mudará para um tipo de verde e a cor do texto será branca; assim
que ele passar para outro campo, tudo voltará ao que era antes de ele dar foco
àquele elemento.
:lang36
A pseudo-classe para linguagem (idioma) pode ser usada para estilizar elementos
cujo conteúdo está escrito em uma determinada linguagem (idioma - uma língua
para humanos e não uma linguagem de marcação). A regra a seguir define que tipo
de aspas usar para textos inline que estão escritos no idioma da Suécia:
q:lang(sv) { quotes: "\201D" "\201D" "\2019" "\2019"; }
A linguagem para humanos (idioma) de um documento, normalmente é

especificada pelo atributo lang em e pelo atributo xml:lang em XHTML.
PSEUDO-ELEMENTOS
Assim como as pseudo-classes, os pseudo-elementos ajudam o desenvolvedor a

economizar com a inserção de DIVs e SPANs extra, e, ao mesmo tempo, possibilita
que alguns efeitos de estilização bem interessantes possam ser realizados.
36 Tomarei emprestadas as palavras de Maujor (http://www.maujor.com/) que estão na tradução que fez do artigo “CSS2.1
selectors, Part 3” (http://www.456bereastreet.com/archive/200510/css_21_selectors_part_3/), de Roger Johansson
(http://www.456bereastreet.com/).

44
:first-line
Como indica o próprio nome, este pseudo-elemento diz respeito à primeira linha
(de parágrafos, geralmente37). Mas, até onde vai a “primeira linha” de um
parágrafo? Bem, na verdade, a “primeira linha” é literalmente a primeira linha
(dããã). Quer dizer, a primeira linha que é exibida. Se um desenvolvedor estiliza os
parágrafos com :first-line, com, por exemplo38:
p:first-line {
background-color: red;
color: white;
}
Muito bem. Mas sabe o que acontece caso a janela seja redimensionada (de modo a
“reacomodar” o texto) ou o tamanho da fonte seja alterada (pelo próprio visitante)?
Isso, parabéns: a estilização vai acompanhar a primeira linha que é exibida!
:first-letter39
De maneira semelhante a :first-line, esta pseudo-propriedade estiliza a primeira

letra de elementos a nível de bloco, list-item, table-cell, table-caption e bloco inline.
Geralmente é utilizada em algumas webpages para dar aquele efeitinho de primeira
letra diferente que se encontramos em jornais e revistas. Seria algo como:
#primeiroParagrafo:first-letter {
color: #FFF;
font-family: fantasy;
font-size: 200%;
padding: 2px;
}
37 Mas pode estilizar, também, elementos a nível de bloco, blocos inline, table-caption ou table-cell. Na verdade, conforme
consta no documento oficial do W3C “Selectors” (http://www.w3.org/TR/CSS21/selector.html), a compatibilidade desse
pseudo-elemento diz respeito às propriedades de font, cor e background, "word-spacing”, “letter-spacing”, “text-
decoration”, “vertical-align”, “text-transform” e “line-height”.
38 Tudo bem, tudo bem, ninguém vai querer todas as primeiras linhas de seus parágrafos com fundo vermelho e letra
branca, mas é só para ilustrar o conceito, pô...
39 Segundo o documento “Selectors” (http://www.w3.org/TR/CSS21/selector.html), o :first-letter pode ser estilizado com
propriedades de font, margin, padding, border, color e background, "text-decoration", "text-transform", "letter-spacing",
"word-spacing" (quando apropriado), "line-height", "float" e "vertical-align" (apenas se "float" for igual a "none").

45
:before e :after
A significação destas palavras é, respectivamente, “antes” e “depois”. Na minha

opinião, estes pseudo-elementos são os mais poderosos em CSS, pois permitem
que você gere conteúdo antes e depois do elemento que receber estilização.
Por exemplo, para exibir a URL de um link entre parênteses, sem precisar escrevê-
lo40:
.comentarios a:after {
content: " (" attr(href) ") ";
}
Ou seja, o conteúdo (content) que será apresentado depois (:after) de links (a) da
classe “comentarios” (.comentarios) será o atributo (attr) caminho do link (href),
que será colocado entre parênteses (“ (” [...] “) ”). É realmente um pouco
complicado, no início, mas, depois de alguns testes e implementações, facilita
bastante.
Muitas outras coisas podem ser feitas com :before e :after, como, em um
documento, organizar os títulos primários (h1) assim: “Capítulo 1: [texto do h1]”,
no próximo h1, será colocado “Capítulo 2: [texto do h1]”, com o contador
automático, ou seja, você pode inserir os h1 normalmente, que o CSS se encarrega
de incrementar a numeração41!
COMPATIBILIDADE
Infelizmente, nem tudo são flores quando se fala em aplicar os seletores
avançados. Os navegadores mais antigos não dão suporte a esse parte da
tecnologia CSS e, o que chega a ser até triste, o navegador mais usado no mundo,
o Internet Explorer (também conhecido como “IEca”), até sua penúltima versão, a
6, também não oferece suporte a praticamente todos os seletores avançados.
Devido ao fato de a versão 7 deste navegador ser bem recente, ainda vai demorar
40 O nome da classe do exemplo foi proposital. Quis demonstrar que uma boa aplicação para o uso do pseudo-elemento
:after é para exibir a URL do site de alguém que faz comentários em um post.
41 Confira o documento do W3C “Generated content, automatic numbering, and lists”, que pode ser acessado através do
endereço http://www.w3.org/TR/CSS21/generate.html .

46
alguns bons meses (ou anos) para que a maioria de seus usuários atualizem sua
versão.
De qualquer forma, ficam expostos os seletores avançados. Como pôde ser visto,
eles são muito poderosos, mas devido ao que foi dito no último parágrafo, ainda
devem ser usados com cautela.
Uma coisa legal de se fazer é colocar alguns recursos que só funcionam em bons
navegadores (leia-se, navegadores que não sejam o IEca, tais como
Firefox/Iceweasel e Opera), sem prejudicar o funcionamento do site, como um
todo. Apenas colocar elementos para que ele fique mais “interessante”, quando
acessado por navegadores decentes.
Aí, para fazer uma “contra manipulação”, você coloca no rodapé: “otimizado para
Firefox” (por exemplo), com um link para pegar o browser.

47
48
CAPÍTULO 3
COMPLEMENTOS
Para fechar a apostila, discorro, neste capítulo,

sobre alguns temas que são pertinentes ao
desenvolvimento para web. Também indico
alguns links interessantes e/ou indispensáveis.

49
50
DICAS GERAIS
Depois dessa abordagem geral sobre CSS, cabe, agora, algumas questões
referentes ao modus operandi da coisa, ou seja, algumas dicas de como otimizar
seu trabalho e rendimento e como evitar frustrações futuras.
TESTAR EM VÁRIOS NAVEGADORES

É de conhecimento geral entre os membros da comunidade de desenvolvedores o
não seguimento às normas do W3C, todas as falhas e pontos negativos intrínsecos
ao navegador Internet Explorer (frisando: o IEca).
Devido à atitudes negligentes e descaso com o usuário final, a Micro$oft, mesmo

após insistentes e emocionados apelos de variados setores e pressões advindas de
empresas de grande porte, insiste em não dar suporte a inúmeros elementos da
tecnologia CSS (dentre muitas outras coisas, mas estou focando no assunto da
apostila). Todos sabemos que existem motivos escusos por trás desta gracinha que
eles fazem, pois, é de conhecimento mundial que a citada empresa (ou corporação,
ou sei lá o quê) é uma das que mais têm recursos disponíveis (se não a mais) para
investir em qualquer coisa que queira42.
Se realmente seus dirigentes tivessem o mínimo de responsabilidade social e

consideração com os usuários do não menos infame Rwindows (aglutinação de
“Ruim é o Windows, afff!”), tomariam medidas para que a qualidade final de seus
produtos se elevasse pelo menos ao ponto de não obrigar desenvolvedores
inocentes de páginas para a internet a desperdiçar horas para identificar e corrigir
bugs provenientes da falta de qualidade de seu navegador meia boca43.
Desabafos à parte, o que quero mostrar com esse tópico é a importância de realizar
muitos (mas muitos, mesmo) testes em navegadores diferentes durante a fase de
desenvolvimento das páginas dos websites. É de suma importância que se faça
testes em, no mínimo, 2 navegadores: Firefox/Iceweasel e IEca. Preferencialmente,
42 Nem sei como eles ainda são aceitos no W3C...
43 Ou exigir 1GB de RAM para rodar um efeitinho chulé de flip entre janelas ou, o que é o maior absurdo da história dos
sistemas operacionais: exigir, nada mais, nada menos, que 3BG de RAM para rodar a nova versão do Rwindows em
“desempenho total”...

51
contudo, seria indicado que os testes abrangessem também browsers como Opera,
Konqueror, Safari44 e Lynx (sim, claro!), a fim de garantir, mesmo, que o resultado
pretendido será semelhante em diversas situações e plataformas45.
E perceba a ordem que está lá: Firefox/Iceweasel e, depois, IEca! O melhor

caminho a seguir é esse, acredite46. Devido ao fato de o Firefox/Iceweasel ter
suporte mais abrangente aos padrões do W3C, o mais sensato é desenvolver com
foco nele para, só depois, rodar as páginas no IEca e conferir as falhas existentes.
Acontece que, devido a fatores vários, tais como estilos de desenvolvimento,

marketing e propaganda, visão e missão, e muitos outros, as empresas tomam
rumos diferentes em se tratando da elaboração de novas tecnologias e suporte às
já existentes, o que, invariavelmente, causa “distúrbios”, inconsistências entre os
diversos navegadores disponíveis na praça.
Até versões diferentes do mesmo navegador podem trazer mudanças drásticas e

resultados surpreendentes na visualização; além, é claro, de praticamente obrigar
os desenvolvedores a “engatilhar” suas páginas para que sejam exibidas
corretamente nas diferentes versões.
De qualquer maneira, é a vida... Isso acontece, mesmo, não tem jeito, e quem está
interessado em ser profissional da área tem de aceitar ou, pelo menos, se
conformar (é o meu caso) com esse tipo de acontecimento.
Meu conselho é: paciência e perseverança!
COMENTÁRIOS CONDICIONAIS
“Tudo, bem, tudo bem. Depois de ler o tópico anterior fiquei sensibilizado e seguirei
seu conselho de ser paciente e dedicado, mas, afinal de contas, o que realmente
posso fazer para eliminar os problemas que estão acontecendo quando meus
websites são visualizado no IEca”? Boa pergunta!
44 Uma boa notícia: saiu, para PC, o Safari 3 (beta)!
45 Evidente que, caso não se tenha acesso a MACs e/ou outros sistemas operacionais do que atualmente se usa (e tomara
que não esteja falando do “navegador azul de logomarca feia”), o teste, infelizmente, limitar-se-á aos dois necessários
para testes mínimos.
46 Se não quiser acreditar, tudo bem. De repente você é daqueles religiosos que têm que “ver para crer”, ou daqueles
metrossexuais que gostam de “sentir na pele essa emoção”. (-:

52
Na verdade, existem diversas respostas para ela, mas me reservo a mostrar a que
penso ser a melhor “alternativa” para tal: comentários condicionais.
A própria empresa que desenvolve o IEca (que me recuso a escrever o nome mais
uma vez), ciente de sua falta de vergonha na cara, apareceu com uma solução até
certo ponto agradável para tentar resolver as inúmeras diferenças advindas da falta
de suporte a padrões internacionais de um de seus produtos, desenvolvendo,
então, os comentários condicionais, também conhecidos como “CC”.
Através dos CC podemos alterar regras CSS especificamente para IEca, através de
uma folha de estilo à parte, que só “entra em ação” caso o browser que visita a
página seja esse aí.
Vou exemplificar. Lembra-se de como se faz para se vincular um arquivo CSS a um

determinado documento? Isso, mesmo! No “head” do documento, coloca-se:
Pois bem, através de uma implementação nos comentários (X)HTML tradicionais47,

pode-se indicar uma outra folha de estilos para ser exibida exclusivamente para o
IEca (geralmente alcunhada “iehacks”). E seria o seguinte:


Isto é, depois de vincular sua folha de estilos normalmente, você irá, através dos
CC, vincular, também, uma outra, que é a iehacks.
Devido ao efeito cascata, quando uma folha de estilos é vinculada a um documento

posteriormente a outra, no caso, o iehacks, ela vai sobrepor as regras contidas na
folha de estilos anterior.
47 Como você bem deve saber, os comentários (X)HTML começam com “”.

53
Ou seja, se no arquivo “nomeDaSuaFolhaDeEstilos.css” estivesse a seguinte regra:
#corpo #elementoPrincipal .citacao {

border: 3px double #999;
color: #FFF;
display: block;
margin-left: 10% 15%;
padding-right: 5%;
position: absolute;
}
Vamos supor que, quando renderizado no Firefox/Iceweasel, as páginas sejam

exibidas corretamente, da maneira que foram idealizadas. No entanto, no IEca,
você percebe que o que está contido nessa classe não se apresenta de igual
maneira: ele está mais para a direita do que você gostaria, e o problema é na
propriedade padding-right. Você simplesmente teria, dentro do arquivo iehacks, o
seguinte:

padding-right: 15%;
}
Entendeu? Você especificou que, se, e somente se, o navegador que renderiza a
página for IEca, a classe “citacao” terá um padding-right de 15%; do contrario,
quer dizer, em qualquer outro navegador, continuará com seus 5% “originais”48.
Se, por exemplo, sua vontade fosse a de que, no IEca, as letras dessa classe
aparecessem em uma cor vermelha, a regra seria a seguinte:

color: #F00;
padding-right: 15%;
}
Há muito mais coisas a se saber sobre os comentários condicionais! É de vital

importância que se faça uma pesquisa sobre o tema!
48 Como deve ter notado, não é preciso inserir toda a regra, mas somente a propriedade que se queira modificar.

54
!important
Lembra-se do efeito cascata? Pois deveria... De qualquer maneira, quando se usa
!important, está se querendo modificar o grau de prioridade de uma propriedade.
Se, por exemplo, dentro de um documento qualquer tem-se uma folha de estilos
externa e uma declaração inline, ambas com uma propriedade tratando da mesma
regra, qual delas vai prevalecer? Isso, mesmo, a inline! A não ser que, naquele
arquivo externo, a declaração tivesse um !important. Se, no arquivo externo,
estivesse:
.qqCoisa { color: #F00 !important; }
E, no estilo inline:
Qualquer coisa...
De qualquer maneira, o parágrafo seria exibido com uma cor vermelha, e não
verde, como era para “normalmente” acontecer. E isso aconteceu devido ao
!important, que especificou que, naquela folha externa, a propriedade que tratava
da cor era mais “!important”.
Mais uma vez: pesquise, pesquise, pesquise...
SEMÂNTICA
Um assunto muito abordado no meio de desenvolvedores web conscientes é a
semântica. Inclusive, este é um tema que deve ser estudado e principalmente,
praticado efetivamente, caso se queira atingir um grau de amadurecimento
profissional adequado e oferecer um serviço de qualidade para os clientes.
“Semântica”, no contexto da web, tem um significado ligeiramente diferente

daquele ensinado pela Tia Cotinha, na 4ª série. Aqui o sentido do termo é dar
sentido ao conteúdo das páginas, é dar significado!
Quando estamos codificando páginas web, inserimos tags (X)HTML para marcar os
trechos e elementos que queremos. Se queremos indicar que uma palavra é um

55
título primário, esta vai entre <h1> e </h1>. Se um bloco de texto é um parágrafo,
logo o colocamos envolto ao par de tags e . Até aqui nenhuma novidade,
estamos dando o significado correto para os elementos. Infelizmente, não é desse
jeito que todos fazem.
Quem já não se deparou com páginas cujo layout é todo feito com tabelas? Quem
já não viu um “parágrafo” todo em h2, para que o texto apareça maior, com mais
destaque? É esse tipo de barbaridade a que estou me referindo. Ao fazer essa
atrocidade, o desenvolvedor está ferindo a semântica! As tabelas não foram
idealizadas para que fossem utilizadas em montagens de aparência para os sites;
os títulos secundários não foram feitos para dar destaque a um parágrafo...
Quando alguém não elabora um código semanticamente correto, está prejudicando

não somente seu cliente, que pagou por um serviço de qualidade e está levando
para casa um site que vai aparecer na 15ª página de resultados do Google, mas,
principalmente, a si mesmo! É óbvio! E esse prejuízo tem várias “nuances”: quando
seu cliente ficar sabendo que existem métodos de desenvolvimento melhores que o
seu, vai mandar um e-mail de despedida, e ainda por cima te queimar com quem
ele tiver oportunidade. Você perdeu um cliente e deixou de ganhar pelo menos o
dobro, que poderia vir por indicação.
Com isso, seu nome vai ficando enlameado e sua reputação despenca. Dependendo
do “tipo” do seu ex-cliente, fique muitíssimo feliz caso não receba uma cartinha do
advogado dele... Já pensou se ele resolve pegar o dinheiro de volta por não ter tido
uma prestação de serviço de qualidade que, ainda por cima, prejudicou seus
negócios?
Não que esta situação sempre aconteça, mas também não pense que nunca
aconteça...
Enfim, quando se fala em semântica, fala-se em dar o correto significado aos

elementos que compõem as páginas. Em descrever as informações de forma
acertada, de forma que os mecanismos de busca possam lhe dar o merecido crédito
por seu profissionalismo e colocar seu site nas primeiras colocações de resultado49!
49 Não sei se já aconselhei isso, mas: pesquise sobre semântica e mecanismos de busca (“SEO”)!

56
LINKS
Como prometido, vou indicar alguns links interessantes para que você possa
expandir seus horizontes de conhecimento! Lembrando que sempre, mas sempre,
mesmo, devemos fazer pesquisas constantes para aprender coisas novas e
fixar/aprimorar as que já sabemos. Se não for assim, o “mercado” chega primeiro...
GERAL
http://www.maujor.com/
Ao longo da apostila, citei várias vezes o endereço do Maujor (e isso foi proposital).
Foi lá que eu tive o primeiro contato com o CSS e assuntos afins. Eu considero que
o site seja uma imensa “apostila virtual”, e julgo ser a melhor referência que
atualmente se tem no Brasil! Se não fosse o site de Maurício Samy Silva,
provavelmente hoje eu ainda estaria compondo layouts em tabelas... Eu sei que
você não sabe que eu existo, mas eu e muitas outras pessoas sabemos que você
existe, e pudemos elaborar websites melhores graças a sua ajuda e dedicação!
Muito obrigado, Maujor!
http://webinsider.uol.com.br/
O Webinsider é um daqueles portais com dezenas de seções direcionadas aos mais
variados assuntos e públicos. A qualidade das informações que seus autores
transmitem é muito boa, e, lá, podem-se encontram temas voltados tanto à
programação, propriamente dita, quanto assuntos mais “abstratos”, que instigam o
visitante à reflexão sobre temas do dia-a-dia (de um desenvolvedor web).
http://www.imasters.com.br/
Talvez o portal dispense apresentações... De qualquer maneira, é no iMasters que
muitas das melhores postagens de códigos e tutoriais atualmente disponíveis estão.
Eles com certeza são um dos melhores e mais conhecidos portais sobre
desenvolvimento do Brasil e têm até revista impressa de circulação nacional.

57
BLOGS
http://www.revolucao.etc.br/
Este é o blog de Henrique Costa Pereira, um desenvolvedor que trata de assuntos
referentes ao desenvolvimento para web e correlatos. Ele não trata estritamente da
codificação técnica (embora também faça isso), mas sim de assuntos que instigam
a reflexão do leitor e apresenta dicas de essencial utilidade prática.
http://www.brunodulcetti.com/blog/
Em seu blog, Bruno Dulcetti trata de diversos temas relacionados ao
desenvolvimento para web. Ele utiliza uma linguagem descontraída e de fácil
acesso a qualquer indivíduo, desde o desenvolvedor veterano àqueles que estão
dando seus primeiros passos na área.
http://fatorw.com/
As postagens de Walmar Andrade são muito úteis e interessantes. Ele aborda desde
temas mais complexos, com textos um pouco mais longos, à dicas para outros sites
e matérias, com textos estilo “rapidinha”. No Fator W são tratados assuntos como
Arquitetura da Informação, Usabilidade, Web Standards, Design, dentre muitos
outros.
http://www.pinceladasdaweb.com.br/blog
Acessibilidade, CSS, Microformats, AJAX, Semântica, Linux... Esses e muitos outros
assuntos são tratados por Pedro Rogério em seu blog. Seus textos são agradáveis
de se ler, por serem simples e objetivos.

58
CONCLUSÃO
É isso, aí, chegou o momento de dizer “Adeus!”... Tá muito legal escrever a
apostila, e tudo o mais, mas com certeza ela já está ficando grande e minha
intenção não é amolar.
Como já disse no início, não quis apresentar listas intermináveis de seletores e

técnicas sofisticadas para composições de layouts. Para esse tipo de referência, aí
em cima tem aquela listagem de links!
Creio que para obter um bom rendimento ao ler a apostila, deve-se fazê-lo com o
site do Maujor aberto no navegador50. Dessa forma, quando começarem a surgir
dúvidas a respeito da codificação, propriamente dita, basta fazer uma breve
consulta para saber do que se trata.
Eu até fiquei pensando em como seria a reação do leitor em alguns trechos que têm
propriedades CSS que não foram apresentadas, mas é impossível saber... Por isso,
que tal enviar uma mensagem falando o que pensou dessa abordagem? Só entrar
no blog e preencher o formulário!
Agradeço a audiência e a paciência de todos os que chegaram até esse arremate da

apostila (principalmente aos que leram todo o restante antes...) e espero ter
ajudado, de alguma maneira!
Muito Obrigado!
50 “Pô, que sacanagem! Ele só foi falar isso na Conclusão?”. É, foi proposital... Agora você lê tudo de novo com o site aberto!

59
51
51 Esta última página foi colocada somente para a apostila ficar com número de páginas “redondo”: ela tem 60 (e 51 notas de
rodapé: uma boa idéia!). (-;

60

CSS, Uma Abordagem Geral

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

CSS, Uma Abordagem Geral

Încărcat de

Drepturi de autor:

Formate disponibile

SOBRE ESTA APOSTILA

Antes de mais nada, gostaria de comunicar que esta apostila é ligeiramente

Bem, voltando ao assunto principal, contrariando as tendências minimalistas da

É exatamente isso que tem por aqui: um monte de informalidadezinha!

CSS: uma abordagem geral - http://tarciozemel.asciijf.com/ - 2007

Só para esclarecer, o público-alvo da apostila são os iniciantes na área de CSS.

CSS: uma abordagem geral - http://tarciozemel.asciijf.com/ - 2007

● copiar, distribuir, exibir, executar a obra

● criar obras derivadas

Sob as seguintes condições:

Atribuição: você deve dar crédito ao autor original, da

● Kurumin 7 kernel 2.6.18 (SO)

● Quanta+ 3.3.2 (códigos)

● Konqueror 3.5.5 (testes)

● BrOffice.org 2.0 (textos)

CSS: uma abordagem geral - http://tarciozemel.asciijf.com/ - 2007

CSS: uma abordagem geral - http://tarciozemel.asciijf.com/ - 2007

CSS: uma abordagem geral - http://tarciozemel.asciijf.com/ - 2007

Neste capítulo apresento algumas questões

CSS: uma abordagem geral - http://tarciozemel.asciijf.com/ - 2007

O World Wide Web Consortium (W3C) é um consórcio de âmbito internacional

Ainda no mesmo documento, é apresentada uma explicação sobre o que

O W3C desenvolve especificações abertas (de facto standards) para aumentar

Ou seja, o W3C faz recomendações a respeito de tecnologias, métodos e técnicas

CSS: uma abordagem geral - http://tarciozemel.asciijf.com/ - 2007

Por camada de conteúdo, entende-se que seja as informações que o website

A camada de apresentação refere-se ao modo como o que consta na camada de

Na camada de comportamento alguns “efeitos” são postos às páginas para

CSS: uma abordagem geral - http://tarciozemel.asciijf.com/ - 2007

A camada de conteúdo, “tecnicamente” falando, é onde se insere o (X)HTML. E esta

Através das tags (X)HTML podemos especificar o que é um título primário ou

5 Será que usei a acentuação corretamente?

CSS: uma abordagem geral - http://tarciozemel.asciijf.com/ - 2007

Anteriormente à chegada de CSS no âmbito das tecnologias voltadas ao

<h1><font color="red" size="16">T&iacute;tulo</font></h1>

E se, ao invés de 10 ou 20 páginas, o website tivesse 40 ou 80 páginas e a

Essa “mistura de ambientes” (conteúdo e apresentação) certamente é prejudicial

CSS: uma abordagem geral - http://tarciozemel.asciijf.com/ - 2007

Foi para melhorar a vida/trabalho dos desenvolvedores (e clientes) que as folhas de

Respondendo à pergunta do presente tópico, CSS, ou folha de estilo em

CSS: uma abordagem geral - http://tarciozemel.asciijf.com/ - 2007

SEPARAÇÃO DAS CAMADAS DE DESENVOLVIMENTO10

Enquanto a camada de conteúdo vai sendo codificada em (X)HTML, a camada de

WEBSITES MAIS LEVES

Via CSS, é possível criar efeitos sofisticados/arrojados, anteriormente só alcançados

CSS: uma abordagem geral - http://tarciozemel.asciijf.com/ - 2007

Quando se utiliza as folhas de estilo para a estruturação de layouts, esse problema

DIFERENTES ESTILOS PARA DIFERENTES MÍDIAS

CSS: uma abordagem geral - http://tarciozemel.asciijf.com/ - 2007

Neste capítulo abordarei a codificação CSS,

CSS: uma abordagem geral - http://tarciozemel.asciijf.com/ - 2007

Os conceitos que apresentarei a seguir são a base para o entendimento de todas as

Frisando: grande parte do que apresento aqui é, na verdade, uma compilação de

COMO ESCREVER CSS (SINTAXE)14

CSS: uma abordagem geral - http://tarciozemel.asciijf.com/ - 2007

Portanto, a sintaxe genérica de uma declaração CSS simples é a seguinte:

seletor { propriedade: valor; }

seletor representa, em um primeiro momento, as tags (X)HTML, tais como

propriedade assumindo “parâmetros” que podem ser controlados através das

valor como, nas palavras de Maurício Samy Silva, o Maujor17, a “característica

E, através da “fórmula” acima, também pode-se observar mais algumas questões a

Ficou um pouco confuso depois da explicação? Basta olhar novamente (e quantas

Se eu quiser que a cor da letra de todos os parágrafos do website sejam de uma

CSS: uma abordagem geral - http://tarciozemel.asciijf.com/ - 2007

<h1><font color="red" size="16">Título</font></h1>

<p id=“paragrafoDestaque”>Este é um texto com destaque!</p>

<p>Para maiores informações, acesse o <a

<p class="vermelho">segundo parágrafo</p>

<p class="verde">terceiro parágrafo</p>

<p class="vermelho">quarto parágrafo</p>

<p class="verde">quinto parágrafo</p>

<p>Campanha de saúde pública: "<span lang=“en”>Microsoft