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.
As definições de estilos podem ser feitas por três vias:
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:
<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.
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.
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.
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 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 | Dentro de cada folha de estilos, a última definição tem prioridade. |
|
| 2 | folha de estilos do usuário | ||
| 3 | folha de estilos externa | folhas de estilos do autor | |
| 4 | folha de estilos interna | ||
| 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.
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 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.
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.
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.
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.
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.
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.
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.
body {
background-color: #F1F1F1;
font-family: Arial;
}
h1 {
background-color: Teal;
color: White;
text-align: center;
}
h2 {
color: Navy;
}
p {
font-size: 12pt;
}
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.
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.