UNIP

Produção de Páginas Web

Profa. Cristina Ramos (cristina.ramos@unip.br)

CSS - CASCADING STYLE SHEETS

O que é CSS ?
CSS é a sigla para Cascading Style Sheets que em português foi traduzido para
folhas de estilo em cascata e nada mais é que um documento onde são definidas
regras de fomatação ou de estilos, a serem aplicadas aos elementos estruturais de
marcação (HTML).

Por que CSS ?

A finalidade do uso de CSS é a de separar a marcação HTML da apresentação do
site. Em outras palavras, vale dizer que o HTML destina-se unicamente a estruturar
e marcar o conteúdo, ficando por conta das CSS toda a responsabilidade pelo visual
do documento.
HTML marca e estrutura textos, cabeçalhos, parágrafos, links, botões, formulários,
imagens e demais elementos da página e CSS define cores, posicionamento na tela,
estilos de linhas, bordas e tudo o mais relacionado à apresentação.
A adoção desta técnica resulta em múltiplas vantagens e benefícios que não são
conseguidos quando se utiliza o conceito largamente empregado para construção
de web sites, baseado no uso de tabelas e de atributos de estilização dentro das
tags HTML.
Algumas restrições (em 2003) ainda freiam o uso pleno geral e irrestrito de CSS na
Web. As restrições são por conta da incapacidade de alguns browsers em dar
suporte total às CSS. Com o passar do tempo a tendência é a de cair em desuso
total os browsers antigos que não suportam ou mesmo suportam parcialmente
CSS. Soma-se a favor das CSS a normatização que o W3C vem implementando
sobre o assunto e o desejo dos fabricantes de se adequar àquelas normas. É uma
questão de tempo!

Vantagens no uso de CSS

• economia de tempo de criação e manutenção
• maior eficiência no gerenciamento do layout
• otimização do código — os navegadores carregam as páginas mais rápido
• possibilita a separação entre conteúdo e formatação — interoperabilidade
• amigável aos sistemas de busca e indexação
• facilita o cumprimento de requisitos de acessibilidade
UNIP – PRODUÇÃO DE PÁGINAS WEB

A regra CSS e sua sintaxe

Uma regra CSS é uma declaração que segue uma sintaxe própria e que define
como será aplicado estilo a um ou mais elementos HTML . Um conjunto de regras
CSS formam uma Folha de Estilos. Uma regra CSS, na sua forma mais elementar,
compõe-se de três partes: um seletor, uma propriedade e um valor e tem a sintaxe
conforme mostrado abaixo:
seletor { propriedade: valor; }
body { color: black; }
Seletor: genericamente, é o elemento HTML identificado por sua tag, ou uma
classe, ou uma ID, ou etc., para o qual a regra será válida (por exemplo: <p>,
<h1>, <form>, .minhaclasse, etc...);
Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por
exemplo: font, color, background, etc...).
Valor: é a característica específica a ser assumida pela propriedade (por exemplo:
letra tipo arial, cor azul, fundo verde, etc...)
Na sintaxe de uma regra CSS, escreve-se o seletor e a seguir a propriedade e valor
separados por dois pontos e entre chaves { }. Quando mais de uma propriedade
for definida na regra, deve-se usar ponto-e-vírgula para separá-las.
• se o valor tem + de uma palavra (ex: sans serif) deve ser colocado entre aspas
• se houver + de um valor (ex: helvetica, sans serif) devem ser separados por
vírgula
• quando + de um seletor tem o mesmo valor em uma determinada propriedade,
eles podem ser agrupados (ex: h1, h2, h3 {color:red})

Comentários
Você pode inserir comentários nas CSS para explicar seu código, e principalmente
ajudá-lo a relembrar de como você estruturou e qual a finalidade de partes
importantes do código.
/* comentario */

O seletor classe
Além de atribuir características para as tags básicas do html (<p>, <table> etc),
pode-se especificar classes adicionais a cada elemento.
Você pode "inventar" um nome e com ele criar uma classe a qual definirá as regras
CSS. E o mais interessante das classes, é que elas podem ser aplicadas a qualquer
elemento HTML. E mais ainda, você pode aplicar estilos diferentes para o mesmo
tipo de elemento do HTML, usando classes diferentes para cada um deles.
A sintaxe para o seletor classe é mostrada abaixo. O nome qualquer que você
"inventa" deve ser precedido de . (ponto):
.centro {text-align: center}

2
UNIP – PRODUÇÃO DE PÁGINAS WEB

O seletor ID
Você pode "inventar" um nome e com ele criar uma ID a qual definirá as regras
CSS. O seletor ID difere do seletor de classe, por ser ÚNICO. Um seletor ID só pode
ser aplicado a UM e somente UM elemento HTML dentro do documento.
A sintaxe para o seletor ID é mostrada abaixo. O nome qualquer que você "inventa"
deve ser precedido de # ("tralha", "jogo-da-velha" ):
#introducao {color:red}
Nota: Para o nome que você "inventa" evite usar números, caracteres especiais,
acentuação. Tanto quanto possível use só letras de a-z e de A-Z.

Prioridade de Estilos - O efeito cascata

A folha de estilos externa, separada do documento HTML, é o método ideal pois
pode ser aplicada em diversas páginas o que facilita o desenvolvimento e
manutenção. No entanto, em alguns casos você pode especificar diferentes estilos
para a mesma página por meio da combinação de um arquivo ".css" referenciado
em link ou com a inserção de uma tag de style, e também com atributos de estilo
inline. Se estas diferentes especificações entrarem em conflito entre si, o browser
tem que decidir qual dos valores deve usar. Essa escolha é feita com base numa
ordem de prioridade (cascading style sheets - "folhas de estilo em cascata").
Que estilo será aplicado, quando há conflito de estilos especificados (por exemplo:
uma regra de estilo determina que os parágrafos serão na cor preta e outra que
serão na cor azul) para um mesmo elemento HTML?
Aqui entra o efeito cascata, que nada mais é, do que o estabelecimento de uma
prioridade para aplicação da regra de estilo ao elemento.
Para determinar a prioridade são considerados diversos fatores, entre eles, o tipo
de folha de estilo, o local físico da folha de estilo no seu todo, o local físico da regra
de estilo na folha de estilo e a especificidade da regra de estilo.

A prioridade para o efeito cascata

1. folha de estilo padrão do navegador do usuário;

2. estilo (CSS) inline (dentro de um elemento HTML);

3. estilo (CSS) interno ou incorporado (definido na seção head do documento);

4. estilo (CSS) externo (arquivo ".css" importado ou linkado).

Além disso, deve-se considerar também definições estabelecidas pelo usuário ou

pelo desenvolvedor, como o uso de !important;
Assim, uma declaração de estilo com !important definido pelo usuário prevalece
sobre todas as demais, é a de mais alta prioridade. Entre as folhas de estilo
definidas pelo desenvolvedor do site, os estilos inline (dentro de um elemento
HTML) tem a prioridade a mais elevada, o que significa que prevalecerá sobre
aquele definido na seção head e esta sobre o definido em uma folha de estilo
externa e finalmente a última prioridade é para estilos padrão do navegador.

3
UNIP – PRODUÇÃO DE PÁGINAS WEB

Herança
Ao se desenvolver CSS é importante lembrar que documentos HTML são
hierarquicamente estruturados. Há um ancestral, o elemento de nível mais alto
(pai) do qual os demais elementos (filhos) são descendentes. Os elementos filhos
herdam as características do elemento pai. Por exemplo: cores e tamanhos de
letras.
Assim numa folha de estilos as regras de estilo CSS para o elemento pai serão
herdadas pelos elementos filhos. A herança é passada do elemento pai para os
filhos e estes se tiverem filhos também herdarão e assim por diante, seguindo a
herança até o elemento de menor nível.

Vinculando folhas de estilo a documentos

As folhas de estilo podem ser vinculadas a um documento de três maneiras
distintas:
• Importadas ou linkadas (externas);

• Incorporadas (internas);;

• Inline.

Folha de estilo externa

Uma folha de estilo é dita externa, quando as regras CSS estão declaradas em um
documento a parte do documento HTML. A folha de estilo é um arquivo separado do
arquivo html e que tem a extensão .css
Uma folha de estilo externa é ideal para ser aplicada a várias páginas. Com uma
folha de estilo externa , você pode mudar a aparência de um site inteiro mudando
um arquivo apenas (o arquivo da folha de estilo).
O arquivo css da folha de estilo externa deverá ser linkado ou importado ao
documento HTML, dentro da tag <head> do documento.
<link rel=STYLESHEET href="*.css" type="text/css">*
ou
<style type="text/css">
@import url("estilo.css");
</style>
A diferença em importar o CSS é que esse método permite acrescentar estilos na
própria página que está editando, sem precisar alterar o modelo global (o arquivo
.css).
<style type="text/css">
@import url("estilo.css");
p { font-family: arial; color:black; font-size:10px; }
</style>

4
UNIP – PRODUÇÃO DE PÁGINAS WEB

Folha de estilo incorporada ou interna

Na folha de estilo incorporada ou interna as regras CSS estão declaradas no próprio
documento HTML. Esse método é ideal para ser aplicada a uma única página. Com
uma folha de estilo incorporada ou interna, você pode mudar a aparência de
somente um documento, aquele onde a folha de estilo esta incorporada.
As regras de estilo, válidas para o documento, são declaradas na seção <head> do
documento com a tag de estilo <style>
<style type="text/css">
<!--
p {color:red} (devem ser colocados p/ esconder a css dos browser antigos)
-->
</style>*

Estilo inline
Pode-se definir regras CSS declarando-as dentro da tag do elemento HTML.
Um estilo inline só se aplica a um elemento HTML. Ele perde muitas das vantagens
de folhas de estilo pois mistura o conteúdo com a apresentação. Use este método
excepcionalmente, como quando quiser aplicar um estilo a uma única ocorrência de
um elemento.
<p style="font-weight: ... ; background: ...">

Pseudo-elementos / Pseudo-classes CSS

Pseudo-elementos são usados em CSS, para adicionar efeitos a um seletor, ou a
parte de um seletor.
A sintaxe dos pseudo-elementos é:
seletor:pseudo-elemento {propriedade: valor;}
As classes em CSS podem também ser usadas com pseudo-elementos.
Esta regra permite que você defina diferentes efeitos para pseudo-elementos
localizados em diferentes lugares em uma mesma página.
seletor.classe:pseudo-elemento {propriedade: valor;}
Comumente utilizamos pseudo-classes para a tag a, conforme o exemplo:
<STYLE TYPE="text/css">
<!--
a:link {color:black}
a:visited {color:red}
a:hover {color:blue}
-->
</STYLE>
O código acima quer dizer que qualquer link é mostrado inicialmente com o texto
na cor preta (black), os links que já foram visitados na cor vermelha (red), e
quando o cursor do mouse estiver sobre o link, o texto é visualizado na cor azul
(blue).
Usando a tag a e suas pseudo-classes, podemos criar efeitos interessantes,
principalmente o do link mudar de estilo quando o mouse passa sobre ele.

5
UNIP – PRODUÇÃO DE PÁGINAS WEB

As pseudo-classes do elemento a são:

• :link é aplicada para links que ainda não foram visitadas.

• :visited é aplicada para links que já foram visitadas pelo usuário.

• :hover é aplicada quando o cursor do mouse está sobre o link.

• :active é aplicada quando um elemento está sendo ativado pelo usuário (o

tempo em que o usuário pressiona o botão do mouse e depois solta-o).

Nota: Ao se definir esse conjunto de pseudo-classes DEVE-SE obedecer a essa

ordem a:link seguido de a:visited seguido de a:hover seguido de a:active. Só assim
o efeito será obtido.

Propriedades e Valores
A relação das propriedades e valores utilizados normalmente na aplicação de estilos
nas fontes passou por algumas variações, conforme a evolução das diferentes
versões do CSS e algumas regras não são válidas para todos os navegadores.
Uma tabela de referência atualizada e de fácil consulta pode ser encontrada em:
http://www.w3schools.com/css/css_reference.asp

FONTES E REFERÊNCIAS:
http://www.maujor.com
http://www.ead.unicamp.br/minicurso/css/index.html
http://www.w3schools.com/css/default.asp