HTML

Folhas de estilo - CSS

Quando se deseja garantir uma formatação homogênea e uniforme em todas as páginas de um site as folhas de estilo em cascata (Cascading Style Sheets) facilitam muito o trabalho de criação.

Folha de estilo em cascata é um mecanismo simples para adicionar estilos (exemplos: fontes, cores, espaçamentos) em documentos Web.

Ou seja, CSS é um padrão de formatação (Web Standards) para páginas que permite ir além das limitações impostas pelo HTML.

Web Standards é um conjunto de normas, diretrizes, recomendações, notas, artigos, tutoriais e afins de caráter técnico, e destinados a orientar fabricantes, desenvolvedores e projetistas para o uso de práticas que possibilitem a criação de uma Web acessível a todos, independentemente dos dispositivos usados ou de suas necessidades especiais.

Foi proposto pelo World Wide Web Consortium, W3 Consortium, o qual é uma comissão que define os padrões de programação para a WWW, em duas especificações: CSS1 e CSS2.

A CSS 1 foi lançada em 12/1996 e tem aproximadamente 60 propriedades. É um modelo simples de formatação, na maior parte para apresentações screen-based. A CSS 2 foi finalizado em 05/1998. Mantém todas as propriedades da CSS1 e introduziu 70 propriedades novas.

O uso de folhas de estilo permite:

- maior versatilidade na programação do layout de páginas, sem aumentar o seu tamanho em Kb´s.

- maior controle sobre os atributos de uma página, como tamanho e cor das fontes, espaçamento entre linhas e caracteres, margem do texto, caixas de texto, botões de formulário, entre outros.

- a utilização de "layers", permitindo a sobreposição de objetos, textos e imagens, em camadas.

- modificar rapidamente todo o "layout" de um "site", ou de um certo grupo de formatação (Exemplo: alterar a cor de todos os links).

Regras das folhas de estilos

Exemplicaando com o comando que diz que parágrafos definidos como título 3 terão a cor amarela, nesse tom: H3 { color:#00ffff }

Nesse comando CSS existe uma regra, ou seja, uma indicação do aspecto de um ou mais elementos. Essa REGRA configura a cor de todos os títulos H3 do arquivo.

Uma regra simples do CSS constitui-se de duas partes:

em que: Seletor: é a parte antes das chaves e Declaração: a parte entre as chaves.

O seletor

o elemento de ligação entre o documento HTML e o estilo.

O seletor especifica qual(is) elemento(s) são afetados pela declaração. A declaração configura o efeito que o seletor terá. No exemplo acima, o seletor H3 e a declaração é "color: 00ffff".

É importante notar que com essa regra aplicada ao documento HTML, todos os elementos H3 serão afetados, ou seja, eles terão a cor marela, pois a propriedade "color" afeta apenas a cor da fonte.

A declaração

Uma declaração também tem duas partes, separadas por dois pontos.

parte antes dos dois pontos e Valor: a parte depois dos dois pontos.

é uma qualidade ou uma característica que um elemento deve possuir. No exemplo essa característica é a cor. O valor define exatamente a característica. No exemplo é amarela.
Deve-se ressaltar que as chaves - { } - e os dois pontos - : - são absolutamente necessários para que os navegadores possam distinguir o seletor, a propriedade e o valor.

Modos de aplicar

Há alguns modos de aplicar as folhas de estilo:

1. Embedding (interno, incorporado, ou embutido)

Os comandos CSS ficam dentro de cada página HTML. Permite que uma página possa utilizar uma formatação diferente das outras de um "site". O comando STYLE deve estar entre <HEAD> e </HEAD>.

O código a ser aplicado é:

<STYLE TYPE="text/css">
<!-
.........
Os comandos CSS ficam nesta área
.........
->
</STYLE>

2. Inline (em Linha)

Os comandos de um certo estilo ficam diretamente no elemento HTML que se deseja alterar. Possibilita que só aquele elemento seja estilizado, sem alterar todos os outros da página.

Pode-se colocar quantos comandos dentro de cada página HTML e pode-se utilizar comandos CSS InLine, inclusive se os modos embedding ou linking estiverem sendo usados.

Exemplo: Eis um CSS Inline em um tag parágrafo, que determina que fique indentado em 3cm, na cor amarela e na fonte verdana:

Texto modificado

O código usado foi:

<p style="text-indent: 3cm; color: rgb(255, 255, 0); font-family: Verdana, Arial;"><b>Texto modificado</b></p>

Notar que se a fonte Verdana não estiver instalada no computador do leitor será usada a fonte Arial).

3. Linking (externo, importado, ligado)

Criar um arquivo texto, com todos os estilos a serem aplicados. Salvar com o fomato .css.

A ligação do arquivo externo, ___.css com as páginas HTML será feita por meio de um comando inserido na seção <HEAD> de cada página HTML que se desejar estilizar.

O código a ser aplicado em cada página é:

<LINK REL=StyleSheet HREF="arquivo.css" TYPE="text/css">

É importante observar que uma folha de estilo externa é ideal para ser aplicada a várias páginas, pois alterando-se apenas o arquivo .css pode-se alterar a aparência de um "site" inteiro fácil e rapidamente.

Precedência

Qual estilo será aplicado quando há mais de um estilo especificado para um elemento HTML?

Evidentemente, quando se usa diferentes modos de estilo (exemplo: Inline e Linking) as especificações podem entrar em conflito.

Então, o navegador tem que decidir qual dos valores deve usar. Essa escolha é feita com base numa ordem de precedência (ou seja, é precisamente o que se quer dizer com cascading style sheets - "folhas de estilo em cascata").

Ordem de precedência

1. Estilo inline (dentro de um elemento HTML)
2. Folha de estilo Incorporada (definida na tag < head> do documento);
3. Folha de estilo Externa (importada e linkada);
4. Estilo padrão (default) do navegador

É importante lembrar esta ordem de precedência para que se saiba qual valor de estilo sobrepujará os outros. Assim sendo, um estilo inline tem a prioridade mais elevada, o que significa que prevalecerá sobre aquele definido na tag <head>. Esse, por sua vez, sobrepujará o definido em uma Folha de Estilo Externa, e esse sobre o formato que o navegador especifica.

Arquivos externos: exemplo de formatação

É muito útil definir a apresentação geral do documento (fundo, cor e fonte de texto e a apresentação dos links) em um arquivo externo, pois bastará modificá-lo que todas as páginas do "site" serão alteradas.

Como definir a cor de fundo e fixando a imagem de fundo da página:

body { background-color: #xxxxxx;
background-image: url("/nome.do.arquivo.jpg") }
background-repeat: no-repeat;
background-attachment: fixed }

A definição geral de estilo inclui os 3 tipos possíveis de links:

a:link { color:#xxxxxx }
a:hover { color:#xxxxxx }
a:visited { color:#xxxxxx }

Além da cor, pode-se indicar se o link deve ser sublinhado ou não (underline) ou não (none) por meio do atributo text-decoration. O link também pode aparecer riscado (line-through).

Abaixo, define-se o link não sublinhado, o efeito de "mouse-over" sublinhado e o link visitado com efeito de texto riscado:

a:link { color:#xxxxxx; text-decoration: none }
a:hover { color:#xxxxxx; text-decoration: underline }
a:visited { color:#xxxxxx; text-decoration: line-through }

Pode-se, ainda, definir uma cor de fundo para o link. Exemplo:
a:hover { color:#xxxxxx; text-decoration: none; background:#xxxxxx }

Exemplo de arquivo de estilo externo

Um exemplo de folha de estilo com definições para o documento (cor do texto, fonte, tamanho da fonte, cor do fundo, imagem do fundo, definição de 3 tipos de títulos, definição de parágrafos, definação de enfatizado e cores e presença/ausência de sublinhado nos 3 tipos de links), seria:

Código CSS

Significado

body {
color: #000000;
font-family: arial; verdana;
font-size: 10pt;
background-color: #ffffff;
background-image: url(bgdicas.jpg);
}
h4 {
color:#33ff33;
font-family: arial; verdana;
font-size: 11pt;
}
h3 {
font-weight: bold;
color:#ffffff;
font-family: arial; verdana;
font-size: 10pt;
}
h5 {
font-style: italic;
font-weight: normal;
color:#ffffff;
font-family: arial; verdana;
font-size: 10pt;
}
p {
color: #ffffff;
font-family: arial; verdana;
font-size: 10pt;
margin:0px;
padding:2px 5px;
}
em {
font-style: normal;
color:#33ff33;
}
tr {
font-size: 10pt;
}
a:link { color:#00ffff; text-decoration: underline }
a:hover { color:#77ff99; text-decoration: none }
a:visited { color:#ccffff; text-decoration: underline }

o texto aparecerá
- em cor preta
- em arial, ou, se essa fonte não existir, em verdana
- em tamanho = 10
a cor do fundo será branca e a imagem bgdicas.jpg será usada como fundo.

parágrafos definidos como títulos 4 terão a cor verde limão e aparecerão em arial, ou, se essa fonte não existir, em verdana, e em tamanho = 11

parágrafos definidos como títulos 3 terão a cor branca e aparecerão em arial, ou, se essa fonte não existir, em verdana, em negrito e em tamanho = 10

parágrafos definidos como títulos 5 terão a cor branca e aparecerão em arial, ou, se essa fonte não existir, em verdana, em itálico e em tamanho = 10

parágrafos terão a cor branca e aparecerão em arial, ou, se essa fonte não existir, em verdana, em itálico e em tamanho = 10, sem espaço na margem.

palavra(s) enfatizada(s) terão a cor verde limão e terão estilo normal.

as linhas das tabelas terão tamanho = 10.

Os links terão a cor #00ffff e serão sublinhados, quando clicados exibirão a cor #77ff99 e não serão sublinhados.
os links visitados terão a cor#ccffff e serão sublinhados.

Como usar

Basta salvar o conteúdo da primeira coluna acima, a partir de body, em um arquivo separado,
- substituir os códigos das cores e tamanhos e estilos da fonte pelos desejados.
usando o código hexadecimal para cores,
- dar-lhe um nome (Exemplo: arquivo.css) e
- colocá-lo junto com as páginas HTML.

Evidentemente, o nome do arquivo deve ser o mesmo que consta em <LINK REL=StyleSheet HREF="arquivo.css" TYPE="text/css">

Note que se desejar modificar algo depois, no site todo, como o tamanho ou tipo da fonte, a cor ou a figura do fundo, bastará modificar esse arquivo!

Para ver alguns comandos, parâmetros e unidades em CSS, clique aqui.

Importância do CSS

O CSS, no modo Linking, ou seja, quando se cria um outro arquivo, independente, só para as regras de estilo, realmente representa uma ruptura no ato de criar páginas. E uma enorme facilidade quando se deseja alterar a aparência dos sites.

Há duas grandes vantagens em usá-lo:

- separação entre formatação e conteúdo com conseqüente facilidade para atualização do site e

- diminuição drástica no tamanho do código de cada página.

Ou seja, com o seu uso, os elementos (tags) HTML ficam destinados exclusivamente para marcar e estruturar o conteúdo do documento.

Assim, não se deve usar qualquer elemento HTML para alterar o visual, ou seja, para estilizar o conteúdo.
A estilização será feita em um arquivo independente que, inclusive, pode ser construído como um arquivo txt no Metapad (ou Notepad) e depois renomeado com terminação .css, em que se declarará todas as regras de estilo, as propriedades e valores de estilização para os elementos do documento HTML.

A forma correta de formatar, com estilos

O World Wide Web Consortium Consortium (W3C) removeu o elemento <font> das suas recomendações HTML 4 e XHTML. Nas versões modernas do HTML todo o arranjo gráfico e formatações se obtêm recorrendo apenas a estilos CSS.

Títulos e Sub-títulos

Pode-se definir até 6 tipos de títulos, de <h1> até <h6>, definindo exatamente o seu formato. Por exemplo:

h1 { color: #000000; background: #ffffff } - torna todos os títulos de nível 1, ou seja, que estiverem entre <h1>... e... </h1> de uma página, na cor preto, sobre um fundo na cor branca;

Da mesma forma, os outros títulos podem ser definidos, no tamanho, cor e estilo desejados.

Aplicação de títulos

1. Escolhe-se como serão os parágrafos de título ( tipo, estilo, tamanho e cor da fonte ). O máximo possível são 6 tipos diferentes.

2. Define-se no arquivo css como será cada parágrafo.

3. Seleciona-se o parágrafo desejado.

4. Clica-se no menu "Format" e em "Paragraph".

5. Assinalar o tipo de parágrafo escolhido, entre os 6 tipos de títulos, de 1 a 6, que correspondem a <h1> até <h6>.

Imediatamente todo o estilo definido aparecerá no parágrafo selecionado.

Ênfase

1. Escolhe-se como será o formato da(s) palavra(s) a ser enfatizadas(s): ( tipo, estilo, tamanho e cor da fonte ).
2. Define-se no arquivo css como será todo o estilo da ênfase
3. Seleciona-se (s) palavra(s) desejada(s).
4. Clica-se no menu "Formatar" e em "Estilo do texto".
5. Assinalar "Emphasis". No código fonte a palavra aparecerá entre <em> e </em>.
Imediatamente o estilo definido aparecerá apenas na(s) palavra(s) selecionada(s).

Colocação dos elementos em CSS - caixas

Todos os elementos que podem ser vistos numa página ocupam uma certa área na página, que tem a forma de um retângulo, e que é chamada de caixa. A caixa de um elemento contém tudo aquilo que lhe diz respeito: conteúdo, linhas de contorno, margens e espaço em branco.

Esse esquema representa as diferentes áreas que constituem a caixa de um elemento:

Conteúdo: fica na parte mais interna.

Padding: espaço que pode existir entre o conteúdo e suas bordas.

Border: designa o limite do elemento

Margin: pode existir e separa o elemento de outros da mesma página

Largura do elemento: é determinada pela largura do conteúdo

Largura da caixa: é determinada pela soma das larguras do conteúdo, mais as larguras ocupadas pelas linhas de contorno (border), pelo espaço em branco (padding) e pelas larguras das margens.

Onde obter mais informação

Folhas de Estilo
http://www.icmc.usp.br/ensino/material/html/css.html

Seção CSS da abcDICAS.com.br
http://www.abcdicas.com.br/html/css/csspage.html

CSS para Web Design
http://www.maujor.com/tutorial/intrtut.php

Tutorial e Referência de CSS
http://www.artifice.web.pt/tutoriais/cntd/tut_css1.html

Site sobre CSS e Web Standards
http://www.maujor.com/

Tutorial CSS - Tabela de conteúdos
http://www.pt-br.html.net/tutorials/css/

Este "site", destinado prioritariamente aos alunos de Fátima Conti,
pretende auxiliar quem esteja começando a se interessar por internet,
segue as regras da FDL (Free Documentation Licence),
computadores e programas, estando em permanente construção.
Sugestões e comentários são bem vindos.
Se desejar colaborar, clique aqui.
Agradeço antecipadamente.

Deseja enviar essa página?

Se você usa um programa de correio eletrônico devidamente configurado e tem
um e-mail pop3, clique em "Enviar página" (abaixo) para abrir o programa.
Preencha o endereço do destinatário da mensagem.
E pode acrescentar o que quiser.
(Se não der certo, clique aqui para saber mais).

Enviar página

Se você usa webmail copie o endereço abaixo

http://www.cultura.ufpa.br/dicas/htm/htm-esti.htm

Acesse a página do seu provedor. Abra uma nova mensagem.
Cole o endereço no campo de texto.
Preencha o endereço do destinatário.
E também pode acrescentar o que quiser.

Última alteração: 26 mai 2008