Você está na página 1de 6

Page 1 of 6

Página Inicial Criação de Websites Noções de SQL Downloads Links úteis Hora do Café Entrar em Contato

Tutoriais CSS Básico


HTML Básico Por Aires Bento Pereira Filho
CSS Básico
JavaScript Básico Introdução
XML Básico Como são criadas as folhas de estilos
As três modalidades de folhas de estilos
Guias de Referência
Folhas de estilos externas
Elementos HTML Folhas de estilos internas
Propriedades CSS Folhas de estilos inline
Seletores CSS O efeito em cascata das folhas de estilos
Tabela de Cores HTML/CSS A Sintaxe CSS
As regras CSS
Tabela de Caracteres Especiais Comentários CSS
Como especificar o path Como se definem os estilos
É preciso conhecer com profundidade seletores e propriedades

Introdução
Quando o World Wide Web Consortium (W3C) lançou a versão 4.0 da HTML, incorporou a ela as CSS (Cascading Style
Sheets — Folhas de Estilos em Cascata) que têm a finalidade de dar uma forma de apresentação ao conteúdo do
documento HTML. Passou a ser possível, portanto, separar o conteúdo do documento de sua formatação. Antes de
existirem tais folhas de estilo, recorria-se a elementos e atributos da própria HTML para isso. Por exemplo, com o elemento
<font> definia-se a fonte de texto, seu tamanho e cor. Mas no início da HTML esses recursos não existiam também. Os
elementos e atributos específicos de formatação foram sendo acrescentados à especificação original da HTML pelas
empresas criadoras de browsers, gradativamente.
Com efeito, as tags HTML foram originalmente projetadas para serem aplicadas apenas na definição de conteúdo. A forma
de apresentação desse conteúdo não podia ser definida pelo autor do documento. Por exemplo, quando se colocava numa
página um cabeçalho e um parágrafo, utilizando respectivamente as tags <h1> e <p>, ficava a cargo do próprio browser a
formatação desses elementos; o autor do documento não tinha como interferir no estilo de apresentação, como tipo de fonte,
tamanho, cor, etc.
Mas em muito pouco tempo isso mudou, pois, como já foi dito, os browsers — principalmente os dois maiores, Netscape e
Internet Explorer — passaram a criar desbragadamente variados recursos de formatação e de multimídia que nem sempre
seguiam critérios técnicos aceitáveis e não eram padronizados. E mais: as definições de formatação com a utilização desses
recursos só podiam ser aplicadas individualmente, página por página; não havia como aplicá-las, digamos, em todo o site.
Todas essas incoveniências puderam ser eliminadas com a utilização das folhas de estilo em cascata. Muitos dos elementos
e atributos que se empregavam em formatações foram desaprovados pelo W3C (deprecated) e, portanto, devem hoje ser
abandonados. No seu lugar, deve-se usar propriedades CSS.

Como são criadas as folhas de estilos


As três modalidades de folhas de estilos
As definições de estilos podem ser feitas por três vias:
1. Folha de estilos externa — Definem-se estilos que poderão ser adotados por todas as páginas do site criando um
arquivo externo que contenha o código CSS. Assim, é possível realizar simultaneamente mudanças na aparência de
todas as páginas que estiverem vinculadas a esse arquivo.
2. Folha de estilos interna — As definições são feitas na própria página e, neste caso, só nela os estilos funcionam.
3. Folha de estilos inline — Os estilos são definidos em um elemento específico para funcionarem só nele.
Folhas de estilos externas
Uma folha de estilos externa é um arquivo de texto separado do arquivo HTML e deve conter apenas código CSS; nenhum
outro texto pode ser inserido, nem tags HTML. O arquivo pode ser salvo com qualquer extensão, mas é interessante
atribuirmos a extensão .css para que saibamos que se trata de arquivo de folha de estilos.
No documento HTML, o arquivo CSS deverá ser LINKADO ou IMPORTADO de dentro do elemento <head>.
Para LINKAR uma folha de estilos usa-se a seguinte sintaxe geral:

13/2/2011
Page 2 of 6
<head>
...
<link rel="stylesheet"
type="text/css" href="arquivo.css">
...
</head>
Onde:
rel="stylesheet" indica que o link é feito com uma folha de estilos.
type="text/css" indica que é um arquivo de texto que contém código CSS.
href="arquivo.css" indica o nome do arquivo.

Para IMPORTAR uma folha de estilos coloca-se a linha de comando @import url(arquivo.css) entre as tags <style> e
</style>. Eis a sintaxe geral:
<head>
...
<style type="text/css">
@import url("arquivo.css");
</style>
...
</head>
Onde:
type="text/css" indica que é um arquivo de texto que contém código CSS.
arquivo.css indica o nome do arquivo.

Folhas de estilos internas


Uma folha de estilos interna — também chamada de folha de estilos incorporada — é o código CSS inserido no próprio
documento HTML, entre as tags <style> e </style>, dentro da seção <head>. O que se insere entre essas tags é a mesma
coisa que constituiria o conteúdo do arquivo externo, caso quisesse utiliza-lo. Eis a sintaxe geral de uma folha de estilos
interna:
<head>
...
<style type="text/css">
<!--
/* código CSS */
-->
</style>
...
</head>
A aplicação do usuário (browser, por exemplo) lê as regras de estilo entre as tags <style> e </style> e formata o documento
de acordo com elas.

Note-se que o código CSS foi colocado entre os símbolos de comentários HTML <!-- (abre comentário) --> (fecha
comentário). Por que? Qualquer aplicação de usuártio ignora tags desconhecidas. Isso significa que um browser que não
suporte estilos(browser velho) irá ignorar o elemento <style>, mas o conteúdo do elemento será mostrado na tela. Para
impedir que um browser velho mostre esse conteúdo, é necessário escondê-lo através do uso da marcação de comentário
do HTML.
Folhas de estilos inline
Estilos inline são aqueles que são aplicados a uma única instância de um elemento. São definidos dentro do próprio
elemento, só para ele. Na tag que o introduz insere-se o atributo style e, a este, atribui-se um valor que é constituído de
código CSS. Pode-se, por exemplo, definir estilos para um cabeçalho específico, para um parágrafo específico, para um link
específico, etc.
<elemento style="código CSS">
A maioria dos elementos HTML pode receber o atributo style.

13/2/2011
Page 3 of 6
Os estilos inline devem ser utilizados excepcionalmente porque contrariam o propósito principal das CSS que é o de separar
o conteúdo da apresentação. Na verdade, não há muita diferença entre usar o atributo style ou um atributo de formatação da
linguagem HTML. Mas, de qualquer forma, é um recurso que faz parte da linguagem e muitas vezes se faz necessário o seu
uso.
Observação:
Não se deve fazer confusão: o atributo style tratado aqui não tem a ver com o elemento <style> mencionado anteriormente.
Apenas a palavra é a mesma.

O efeito em cascata das folhas de estilos


O efeito em cascata permite que se faça múltiplas definições de estilo incidentes sobre o mesmo elemento. Mas como se
resolvem os conflitos?
Prevalece a definição mais específica. Ou seja, uma definição feita no próprio documento HTML prevalece sobre a feita no
arquivo externo; uma feita para um elemento específico prevalece sobre a do documento; etc. Esta é uma característica de
enorme utilidade, porque fazem-se as definições gerais e, conforme as necessidades, estabelecem-se diferenciações.
A aplicação do usuário (browser, p. ex.) faz incidirem as definições de estilo, obedecendo a seguinte ordem (o item 5 tem
maior prioridade):

1 folha de estilos default da aplicação do usuário


2 folha de estilos do usuário
Dentro de cada folha de estilos,
3 folha de estilos externa
a última definição tem prioridade.
4 folha de estilos interna folhas de estilos do autor
5 folha de estilos inline

É possível, no entanto, atribuir à definição de estilo a característica especial de "importante", acrescentando a ela a
declaração !important. Neste caso, essa definição suplanta as demais que tenham o mesmo alvo, idependentemente da
ordem mostrada acima. Havendo conflito de definições de autor e usuário que possuam a declaração !important, prevalecerá
a do usuário.
É sobre o efeito em cascata que o autor do documento concentra seu raciocíncio para encadear as folhas de estilos
adequadamente.
A sintaxe CSS
As regras CSS
O código de uma folha de estilos é constituído de comandos denominados regras CSS. Uma regra CSS é formada de um
seletor que antecede as chaves e de uma declaração que fica dentro das chaves. A declaração é constituída de propriedade
e valor separados por dois-pontos. A sintaxe geral é a seguinte:
seletor {propriedade: valor;}
Basicamente, o seletor pode ser um nome de elemento para o qual se queira definir o estilo (seletor de tipo de elemento),
uma classe (seletor de classe) ou um identificador (seletor de id), mas há também outros formatos de seletores.

Havendo mais de uma declaração definida na regra, usa-se ponto-e-vírgula para separá-las. O ponto-e-vírgula é facultativo
na última declaração, quando há mais de uma, e é facultativo também no caso de declaração única.
Uma folha de estilos interna ou externa é formada por um conjunto de regras CSS.
Em estilos inline utiliza-se apenas a declaração (ou declarações separadas por ponto-e-vírgula), obedecendo ao mesmo
formato do que está entre as chaves a sintaxe geral.
Comentários CSS
Comentários são usados para explicar o código de forma a auxiliar numa futura manutenção. Iniciam-se pelo símbolo /* e
terminam com o símbolo */, e são ignorados pela aplicação do usuário (browser, p. ex.). Um comentário pode ser inserido
em qualquer parte do código, ocupar uma linha ou mais. Pode também ser inserido em qualquer linha que componha uma
regra CSS, para explicar tal linha.
/* Isto é um comentário */
Este comentário possui uma linha, mas poderia possuir mais.

Como se definem os estilos


É preciso conhecer com profundidade seletores e propriedades
Para criar uma folha de estilos, basta saber como vinculá-la ao documento HTML e entender a sintaxe da regra CSS, que no
seu formato geral é simples. De resto, é preciso familiarizar-se bem com seletores e propriedades, já que são esses os dois
componentes da regra CSS.

13/2/2011
Page 4 of 6
As propriedades CSS e seus respectivos valores estão disponíveis em Propriedades CSS - Guia de Referência.
Quanto aos seletores, deve-se aproveitar bem o potencial que eles possuem. Pode-se fazer muito com seletores de tipo de
elemento, seletores de classe e seletores de id, sobre os quais estão sendo apresentados alguns casos a seguir. Mas
existem muitas outras estilizações possíveis com combinações de seletores, com utilização de pseudo-classes, pseudo-
elementos e muito mais. Portanto, é recomendável um aprofundamento sobre o assunto.
Mais informações sobre seletores, incluindo uma lista com a descrição de cada um, são encontradas em Seletores CSS -
Guia de Referência.
Algumas definições com o uso de seletores de tipo de elemento
Um caso de uma definição na qual o seletor é o elemento <body>:
body {background-color: #f1f1f1}
Neste caso todo o corpo da página terá a cor de fundo definida.

Quando o valor é formado de mais de uma palavra, é necessário colocá-lo entre aspas:
p {font-family: "sans serif"}
Poder-se-ia utilizar também aspas simples.

Para fazer mais de uma definição deve-se usar como separador o ponto-e-vírgula:
p {text-align: center; color: red;}
Notar que o ponto-e-vírgula na última definição é facultativo. Poder-se-ia colocá-lo até nos casos acima onde há uma única
definição.

Para permitir uma melhor visualização do código, é bom utilizar uma linha para cada definção:
p {
text-align: center;
color: black;
font-family: arial;
}
Aqui também colocou-se ponto-e-vírgula na última definição. Essa prática é aconselhável para evitar erros quando se vai
acrescentar mais linhas.

Seletor de classe
Com o seletor de classe pode-se definir vários estilos diferentes para um mesmo tipo de elemento. O seletor de classe é
formado pelo nome do elemento (tag), um ponto e o nome da classe. Deve-se atribuir um nome descritivo à classe. "Inventa-
se" um nome.
p.destaquea {color: red}
p.destaqueb {color: blue}
Definiu-se aqui dois estilos diferentes de parágrafos, ou seja, duas classes de parágrafos.

Para que os estilos sejam aplicados, utiliza-se o atributo class na tag HTML:
<p class="destaquea">
Este parágrafo tem texto vermelho.
</p>
<p class="destaqueb">
Este parágrafo tem texto azul.
</p>
Tem-se assim dois parágrafos com formatações diferentes porque a eles foram atribuídas classes diferentes.

Pode-se omitir o nome do elemento (tag) num seletor de classe:


.destaque {color: blue}
Neste caso a classe vai poder ser aplicada a qualquer elemento, desde que o estilo definido funcione nele.

13/2/2011
Page 5 of 6
Seletor de ID
O seletor ID deve ser um nome exclusivo e só pode ser aplicado a UM e somente UM elemento dentro do documento. É
formado pelo nome do elemento (tag), um sinal # (tralha) e um nome. Deve-se atribuir um nome descritivo ao ID. "Inventa-
se" um nome.
div#novidade {
float: right;
border: solid 2px #933;
}
Os estilos aqui definidos têm como alvo um elemento <div>.

Para que os estilos sejam aplicados, utiliza-se o atributo id na tag HTML:


<div id="novidade">
<h1>Novidade do mês</h1>
<p>Neste mês, blá blá blá</p>
</div>
Tem-se assim o elemento <div> com os estilos definidos para ele e que só pode aparecer uma única vez em um documento.

Da mesma forma que ocorre com uma classe, pode-se omitir também o nome do elemento (tag) num seletor de ID:
#novidade {
float: right;
border: solid 2px #933;
}
Neste caso, os estilos definidos têm como alvo um elemento de qualquer tipo individualizado pelo atributo id, desde que os
estilos definidos funcionem nele.

Agrupamento de seletores
Para fazer a mesma definição para vários elementos, agrupam-se os seletores:
h1,h2,h3,h4,h5,h6 {
color: green;
}
Neste caso, utiliza-se a vírgula para separar cada um dos seletores.

Exemplificando a utilização de folhas de estilos


Uma folha de estilos simples

body {
background-color: #F1F1F1;
font-family: Arial;
}
h1 {
background-color: Teal;
color: White;
text-align: center;
}
h2 {
color: Navy;
}
p {
font-size: 12pt;
}

13/2/2011
Page 6 of 6
Nesta folha de estilos foram utilizados somente seletores de tipo de elemento. Os elementos <body>, <h1>, <h2> e <p>
terão a formatação nela definida. O código CSS apresentado tanto pode ser salvo num arquivo de texto à parte, constituindo
uma folha de estilos externa, como pode também constituir uma folha de estilos interna.

Um documento HTML com folha de estilos externa


Considerando a folha de estilos acima como uma folha de estilos externa que foi salva com o nome estilos.css, eis um
documento HTML a ela vinculado:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Testando Folhas de
Estilos</title>
<link rel="stylesheet"
type="text/css" href="estilos.css">
</head>
<body>
<h1>Cabeçalho nivel 1</h1>
<h2>Cabeçalho nivel 2</h2>
<p>Parágrafo</p>
</body>
</html>
A linha evidenciada com a cor verde é a referência que se faz à folha de estilos externa (folha de estilos linkada). Todos os
documentos aos quais se queira aplicar esses estilos deverão ter essa linha de comando. Um, mais de um ou todos os
documentos do site poderão adotar os mesmos estilos.

Copyright © 2006 Abpsoft. Todos os direitos reservados. | Mapa do Site |

13/2/2011