Declaração de uma folha de estilo (CSS)

Março 2017

O que é uma folha de estilo

As folhas de estilo são um super conjunto da linguagem HTML, o que significa que elas não estão integradas diretamente nas recomendações HTML do W3C. Assim, é preciso informar o código HTML com elementos que indicam, por um lado, o tipo do documento, ou seja, a versão das recomendações HTML e CSS utilizadas na página e, por outro, os estilos propriamente ditos.

Declaração do tipo de documento

É preciso indicar na página HTML o prólogo do tipo de documento, isto é, uma referência ao padrão HTML utilizado. Esta declaração é feita com uma linha do tipo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">  
<HTML>
<HEAD>...</HEAD>
<BODY>Conteúdo da página</BODY>
</HTML>

Além disso, uma baliza Meta permite indicar ao navegador ou aos motores de busca a linguagem utilizada para a definição das folhas de estilo. Esta baliza Meta, a ser incluída no cabeçalho HTML do documento, é a seguinte:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">  
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
</HEAD>
<BODY>Conteúdo da página</BODY>
</HTML>

Incorporar os estilos

Os estilos podem ser incorporados no documento HTML de três maneiras diferentes:

Estilo do documento: declarado no cabeçalho, ou seja, nas balizas <HEAD> e </HEAD>
Estilo online, isto é, como atributo das balizas
Estilo externo, declarado num arquivo à parte cuja extensão é CSS
Estilo importado, declarado num arquivo à parte cuja extensão é CSS

Estilo do documento

As folhas de estilo de uma página web são declaradas graças à baliza ESTILO, baliza <HEAD> e </HEAD>.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">  
<HTML>
<HEAD>
<STYLE type="text/css">
<!--

Definição dos estilos:

-->
</STYLE>

</HEAD>
<BODY></BODY>
</HTML>

O atributo type= " text/css" da baliza <STYLE> permite especificar o tipo de folha de estilo utilizada. A baliza de comentário <!-- ... --> serve para evitar que navegadores pouco recentes, ou seja, que não suportam as folhas de estilo, mostrem estas informações.

Estilo em linha

Também é possível definir o estilo na baliza de um documento. Este tipo de declaração é chamada de declaração online.

Esta maneira de definir as folhas de estilo é pouco recomendada pois vai ao encontro do interesse das folhas de estilo, na medida em que ele é embarcado no seio de cada elemento. No entanto, isto pode servir para definir, de maneira excepcional, um estilo para um elemento HTML específico, que não necessite uma definição global.

Para definir um estilo online, basta informar o atributo ESTILO da baliza HTML à qual se quer aplicar um estilo específico:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">  
<HTML>
<HEAD>
...
</HEAD>
<BODY>
...
<BALISE Style="style:valor;"> ... </BALIZA>
...
</BODY>
</HTML>


Nota
É possível aplicar um estilo “online” a todas as balizas HTML, exceto as balizas seguintes : BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE

Veja um exemplo de estilo aplicado a uma baliza <H1>:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">  
<HTML>
<HEAD>
...
</HEAD>
<BODY>
...
<H1 Style="Font: 18px Verdana; font-weight:bold;"> Titre </H1>
...
</BODY>
</HTML>

Estilo externo

O fato de poder armazenar a definição das folhas de estilo fora do documento é uma vantagem, porque assim, ao alterar o arquivo que contém as folhas de estilo, é possível alterar o aspecto de todas as páginas web relacionadas.

Numa primeira etapa, trata-se de criar um arquivo de texto com as folhas de estilo e, consequentemente, a extensão será .CSS, por exemplo, style.css :
<!--  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
body {background-image: home.gif;}
LI {font: 13px Verdana;}
B {font: 14px Verdana; font-weight: bold;}
A {
font:12px Verdana;
font-weight: bold;
color=black;
text-decoration: none;
}
H1 {font: 16px Arial;font-weight: bold;color=black;}
H2 {font: 14px Arial;font-weight: bold;color=black;}
-->

Em seguida, basta criar em cada página HTML o atalho para esta página de definição de estilo:
<HTML>  
<HEAD>
<LINK rel="stylesheet" type="text/css" href="style.css">
</HEAD>
...

A baliza LINK avisa ao navegador que ele deve procurar um documento situado fora da página HTML.
O atributo rel="stylesheet" especifica que o documento em questão é uma folha de estilo externa.
O atributo type="text/css" especifica o tipo de folha de estilo.
O atributo href="URL“ dá o URL da folha de estilo, isto é, o seu lugar na Internet.

Estilo importado

As recomendações do W3C oferecem uma última maneira de incluir folhas de estilo num documento, ou seja, importando folhas de estilo. Na verdade, é possível importar folhas de estilo externas a nível da declaração do estilo de documento, inserindo o comando @IMPORT imediatamente após a baliza estilo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">  
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
@IMPORT URL(url da folha a importar);

Definição dos estilos do documento;

-->
</STYLE>
</HEAD>
<BODY></BODY>
</HTML>


Nota
Se várias definições importadas se referirem a mesma baliza, só a última será levada em conta pelo navegador

As balizas <SPAN> e <DIV>

Pode ser preciso aplicar estilos diferentes a partes de texto num mesmo parágrafo, é para isto que servem as balizas <SPAN> e <DIV>

A baliza <SPAN>

A baliza <SPAN> serve para aplicar estilos a partes de um parágrafo. Ela também é utilizada com tanto com ID quanto com CLASS. A sua sintaxe é a seguinte:
<SPAN class=Nome_da_classe> Texto </SPAN>

A baliza <DIV>

Em vez de se aplicar a algumas palavras num parágrafo, a baliza DIV se aplica a um bloco, ou seja, a um ou vários parágrafos. A sintaxe da baliza DIV é a seguinte:
<DIV class=importante> parágrafos </DIV>

Os estilos em cascata

É possível definir vários estilos utilizando os diferentes meios que oferece o CSS. Assim, quando várias folhas de estilo externas são chamadas, obtém-se o que chamamos de cascata de estilos, quer é uma combinação de estilos para diversos elementos HTML. Se vários estilos dizem respeito ao mesmo elemento, só o último será mantido:
<LINK rel=stylesheet type="text/css" href="style1.css">  
<LINK rel=stylesheet type="text/css" href="style2.css">
<LINK rel=stylesheet type="text/css" href="style3.css">

Se vários estilos são redundantes entre diversas folhas de estilo externas, as recomendações CSS também permitem oferecer a escolha entre várias folhas de estilos alternativas, graças ao atributo relda baliza ESTILO, combinado com um atributo TITLE permitindo escolhê-las pelo nome:
<LINK rel=" alternate stylesheet" type="text/css" href="style1.css" title="style1">  
<LINK rel="alternate stylesheet" type="text/css" href="style2.css" title="style2">
<LINK rel=stylesheet type="text/css" href="stylepardefaut.css">

Por outro lado, quando vários estilos são chamados numa página utilizando os diferentes meios de inclusão possíveis, a levada em conta dos estilos, quando vários estilos são redundantes, é tal, que o estilo mais próximo possível do conteúdo é mantido. Assim, a ordem de prioridade é a seguinte:

Estilo online > Estilo do documento > Estilo importado > Estilo externo

Veja também


Declaring a style sheet (CSS)
Declaring a style sheet (CSS)
Declaración de una hoja de estilo (CSS)
Declaración de una hoja de estilo (CSS)
Deklaration eines Stylesheets (CSS)
Deklaration eines Stylesheets (CSS)
Déclaration d'une feuille de style (CSS)
Déclaration d'une feuille de style (CSS)
Dichiarazione di un foglio di stile (CSS)
Dichiarazione di un foglio di stile (CSS)
Este documento, intitulado 'Declaração de uma folha de estilo (CSS)', está disponível sob a licença Creative Commons. Você pode copiar e/ou modificar o conteúdo desta página com base nas condições estipuladas pela licença. Não se esqueça de creditar o CCM (br.ccm.net) ao utilizar este artigo.