As folhas de estilo são um conjunto-superior da linguagem HTML, o que significa que não estão integradas directamente nas recomendações HTML do W3C. Assim, é necessário informar o código HTML com elementos que indicam, por um lado, o tipo do documento, quer dizer a versão das recomendações HTML e CS utilizadas na página e, por outro lado, os estilos propriamente ditos.
É necessário indicar na página HTML o prólogo do tipo de documento, quer dizer, uma referência à norma HTML utilizada. Esta declaração faz-se com uma linha do tipo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD>...</HEAD> <BODY>Contenu de la page</BODY> </HTML>
Além disso, uma baliza Metapermite indicar ao navegador ou aos motores de busca a linguagem utilizada para a definição das folhas de estilo. Esta baliza Méta, a incluir na rubrica 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>Contenu de la page</BODY> </HTML>
Os estilos podem ser incorporados no documento HTML de três maneiras diferentes:
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>
É igualmente possível definir o estilo numa baliza de um documento. Chama-se a este tipo de declaração uma declaração em linha.
Esta maneira de definir as folhas de estilo é pouco recomendada porque vai ao encontro do interesse das folhas de estilo, na medida em que o estilo é embarcado no seio de cada elemento. Isto pode no entanto servir para definir de maneira excepcional um estilo para um elemento HTML específico, que não necessita uma definição global.
Para definir um estilo em linha, basta informar o atributo ESTILO da baliza HTML à qual se deseja aplicar um estilo específico:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> ... </HEAD> <BODY> ... <BALISE Style="style:valeur;"> ... </BALISE> ... </BODY> </HTML>
 | É possível aplicar um estilo “em linha” a todas as balizas HTML, excepto as balizas seguintes : BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE |
Eis 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>
O facto de poder armazenar a definição das folhas de estilo fora do documento é uma vantagem porque é assim possível, alterando o ficheiro que contém as folhas de estilo, alterar o aspecto de todas as páginas web relacionadas!
Trata-se, numa primeira etapa, de criar um ficheiro de texto contendo as folhas de estilo e cuja extensão seja .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;}
-->
Seguidamente, 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> ...
As recomendações do W3C oferecem uma última maneira de incluir folhas de estilo num documento: importando folhas de estilo. Com efeito, é 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>
| Se várias definições importadas se referirem à mesma baliza, só a última será tida em conta pelo navegador |
Pode ser necessário aplicar estilos diferentes a partes de texto num mesmo parágrafo, é para isto que servem as balizas <SPAN> e <DIV>
A baliza <SPAN> serve para aplicar estilos a partes de um parágrafo.
Utiliza-se igualmente com IDEM e com CLASS.
A sua sintaxe é a seguinte:
<SPAN class=Nom_de_la_classe> Texte </SPAN>
Em vez de se aplicar a algumas palavras num parágrafo, a baliza DIV aplica-se num bloco, quer dizer, a um ou vários parágrafos.
A sintaxe da baliza DIV é a seguinte:
<DIV class=important> paragraphes </DIV>
É possível definir vários estilos utilizando os diferentes meios que oferece o CS. Assim, quando várias folhas de estilo externas são chamadas, obtém-se o que chamamos de cascata de estilos, quer dizer uma combinação de estilos para diversos elementos HTML. Se vários estilos dizem respeito ao mesmo elemento, só o último estilo será conservado.
<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 diferentes folhas de estilo externas, as recomendações CS permitem igualmente oferecer a escolha entre várias folhas de estilos alternativas, graças ao atributo rel da baliza ESTILO, combinado com um atributo TITLE permitindo escolhê-las nominativamente:
<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 tomada em conta dos estilos, quando vários estilos são redundantes, é tal que o estilo o mais próximo possível do conteúdo é mantido. Assim, a ordem de prioridade é a seguinte:
Estilo em linha > Estilo do documento > Estilo importado > Estilo externo