SELFHTML: Feuilles de style CSS / Définir des formats CSS / Définir des formats globaux

	Définir des formats globaux
	Construction de formats globaux Définir des formats pour les repères HTML Définir des formats pour les repères HTML imbriqués Définir des formats liés à l'attribut Définir des formats pour des classes Classes en relation avec les éléments div et span Définir des formats indépendants Définir des pseudo-formats

Construction de formats globaux

Les possibilités décrites ici s'appliquent quand vous:
définissez globalement des formats pour un fichier HTML ou bien que vous
définissez un format global dans un fichier CSS séparé

Les formats globaux suivent un schéma bien déterminé:

Exemple:

<html>
<head>
<title>Titre du fichier</title>
<style type="text/css">
<!--
h1 { color:red; font-size:36pt; }
-->
</style>
</head>
<body>
<h1>36 points et rouge!</h1>
</body>
</html>

Explication:

L'exemple contient dans un passage style une définition de format pour l'élément h1 du fichier, donc pour les titres N° 1. Ces définitions de format ont toujours la même construction et se composent des parties suivantes:

Sélecteur:

Par "sélecteur" on entend ce qui se trouve devant les parenthèses accolades. Le sélecteur désigne ce à quoi les définitions qui suivent s'appliquent. Dans l'exemple ci-dessus les formats s'appliquent à tous les titres N°1 (élément h1). Des sélecteurs plus complexes sont cependant également possibles.

Définitions:

Les définitions proprement dites du format se trouvent dans les parenthèses accolades { et }. Elles consistent en une ou plusieurs propriétés CSS qui y sont notées et reçoivent une valeur. Dans l'exemple ci-dessus par exemple, les propriétés CSS color (couleur de police) et font-size (taille de police) sont utilisées. À la propriété color est affectée la valeur red, et à la propriété font-size la valeur 36pt. Entre la propriété et l'affectation de valeur doit toujours se trouver le caractère deux points ":". La définition se termine par un point virgule (;). Il n'y a que pour la dernière définition avant la parenthèse accolade de fermeture que le point virgule peut être omis.

Pour les différentes propriétés et leurs valeurs possibles, reportez vous aux propriétés CSS.

Attention:

Les espaces sont bien permis dans les définitions de format mais les premières versions du navigateur Netscape 4.x ont montré peu de tolérance à cette possibilité - en résumé il ignore les définitions. Bien que ce ne soit pas aussi lisible il est provisoirement préférable pour cette raison de ne pas utiliser d'espaces dans une définition de format. Ainsi des mentions telles que color:red; font-size:36pt; sont acceptées en tous cas, alors que color: red; font-size: 36pt; peut avec certaines versions plus anciennes de Netscape occasionner des erreurs.

Définir des formats pour les repères HTML

Dans un passage style ou dans un fichier CSS externe, vous pouvez définir des formats CSS pour des types d'éléments HTML par exemple pour les éléments pour structurer le texte ou bien pour les tableaux. Quand vous utilisez alors les éléments HTML correspondants dans le fichier HTML, tous les formats que vous avez définis pour le type d'éléments seront appliqués. Ainsi par exemple vous pouvez définir pour les titres N°1, qu'ils soient affichés dans la police Helvetica, avec une taille de 20 points, en rouge, en caractères gras et en italique avec un espace de 16 points le séparant du paragraphe qui le suit. Si alors dans le texte du fichier HTML vous définissez de la façon habituelle un titre N°1, ces dernières propriétés de format seront prises en considération.

Exemple:

Exemple d'affichage: aperçu

<html>
<head>
<title>Titre du fichier</title>
<style type="text/css">
<!--
body { background-color:#FFFFCC;
     margin-left:100px; }
h1 { font-size:48pt;
     color:#FF0000;
     font-style:italic;
     border-bottom:solid thin black; }
p,li  { font-size:12pt;
        line-height:14pt;
        font-family:Helvetica,Arial,sans-serif;
        letter-spacing:0.2mm;
        word-spacing:0.8mm;
        color:blue; }
-->
</style>
</head>
<body>
<h1>&Titre N°1</h1>
<p>Ici un paragraphe normal</p>
<ul>
<li>Un &eacute;l&eacute;ment de la liste</li>
<li>Un autre &eacute;l&eacute;ment de la liste</li>
</ul>
</body>
</html>

Explication:

Pour définir un format global pour tous les éléments HTML d'un certain type, notez le nom de l'élément HTML comme sélecteur, et cela sans parenthèses pointues. Dans l'exemple ci-dessus les repères HTML body (corps du document), h1 (titre N°1), p (paragraphe de texte) et li (élément de liste) ont été notés de cette façon. Si vous voulez formater de la même façon plusieurs repères HTML, définissez tous les repères désirés en les séparant par des virgules, comme dans l'exemple ci-dessus pour p,li.

Cela signifie donc la même chose que vous notiez:
h1 { font-family:Helvetica,sans-serif; }
h2 { font-family:Helvetica,sans-serif; }
ou bien que vous notiez:
h1, h2 { font-family:Helvetica,sans-serif; }

À la suite sont inscrites les définitions de format désirées. Dans l'exemple ci-dessus sont affectées à l'élément body une couleur d'arrière-plan jaune clair (background-color:#FFFFCC;) et une marge gauche de 100 pixels (margin-left:100px;). Les titres N°1 (h1) reçoivent une taille de police de 48 points (font-size:48pt;), la couleur de police rouge (color:#FF0000;) et le style d'écriture en italique (font-style:italic;). Les paragraphes de texte (p) et les éléments de la liste (li) doivent être représentés avec une taille de police de 12 points (font-size:12pt;) avec une hauteur de ligne de 14 points (line-height:14pt;) dans la police Helvetica, ou si elle n'est pas disponible dans la police Arial, et si elle non plus n'est pas disponible dans une police Sans-Serif quelconque (font-family:Helvetica,Arial,sans-serif;). D'autre part des mentions concernant l'espacement des caractères (letter-spacing), l'espacement des mots (word-spacing) et la couleur du texte ont été définies.

Sur les différentes propriétés et leurs valeurs possibles, voir les propriétés CSS.

Définir des formats pour les repères HTML imbriqués

Si vous ne mentionnez rien un repère HTML à l'intérieur d'un autre repère HTML adopte les caractéristiques de ce dernier en y ajoutant seulement les siennes propres. Si par exemple pour le titre n°1 vous définissez la police Times et la couleur rouge, le texte situé dans un tel titre et formaté avec <i>...</i>, apparaîtra de la même façon en rouge et avec la police Times mais en plus il sera en italique.

Vous pouvez aussi déterminer à l'aide de feuilles de style qu'un repère HTML n'aura certaines caractéristiques de formatage que s'il se trouve imbriqué dans un autre repère HTML déterminé. Ainsi vous pouvez décider par exemple que <i>...</i> placé dans des titres ne sera pas représenté en italique mais en couleur bleue alors que cette même commande placée dans d'autres repères HTML ne provoquera comme d'habitude rien d'autre qu'un affichage en italique.

Exemple:

Exemple d'affichage: aperçu

<html>
<head>
<title>Titre du fichier</title>
<style type="text/css">
<!--
h1 { color:red; }
h1 i { color:blue; font-style:normal; }
-->
</style>
</head>
<body>
<h1>Nous étudions les <i>feuilles de style</i></h1>
<p>Nous étudions les <i>feuilles de style</i></p>
</body>
</html>

Explication:

Dans l'exemple ci-dessus il est établi que des passages de texte formatés avec les repères <i> ... </i>, ne soient pas représentés comme d'habitude en italique mais normal (font-style:normal;) et en couleur bleue (color:blue;), Mais alors seulement quand ce passage de texte i se trouve dans un titre n°1 (h1). Pour cela notez d'abord le repère hiérarchiquement supérieur dans l'exemple h1, suivi séparé d'un espace du repère hiérarchiquement inférieur dans l'exemple i.

Dans la première ligne du passage <body> de l'exemple ci-dessus cette définition s'appliquera; dans la deuxième ligne par contre où le repère <i>...</i> est imbriqué dans un paragraphe de texte, il aura son effet habituel.

Autres possibilités pour les repères imbriqués avec les CSS 2.0

À partir de CSS 2.0 existent d'autres possibilités pour les mentions de sélecteurs d'éléments imbriqués:

Exemple d'affichage: aperçu

<html>
<head>
<title>Titre du fichier</title>
<style type="text/css">
<!--
div i { color:red; }
div > p { color:blue; }
div * b { color:violet; }
div + p { margin-top:100px; }
-->
</style>
</head>
<body>
<div align="center">
Texte dans un passage  div avec  <b>seulement du texte en caractères gras</b> et <i>en italique et <b>en plus du texte</b> en caractères gras</i>.
<p>Paragraphe de texte dans un passage div avec <b>seulement du texte en caractères gras</b> et <i>en italique et <b>en plus du texte</b> en caractères gras</i>.</p>
<table border="1"><tr>
<td><p>Paragraphe de texte dans une cellule de tableau.</p></td>
</tr></table>
</div>
<p>Paragraphe de texte hors d'un passage div avec <b>seulement du texte en caractères gras</b>
et <i>en italique et <b>en plus du texte</b> en caractères gras</i>.</p>
<p>Encore un paragraphe de texte.</p>
</body>
</html>

Explication:

Les sélecteurs de l'exemple ont la signification suivante:

div i { color:red; }
Il est ainsi fixé, comme avec la syntaxe CSS-1.0, que les éléments i, dans la mesure où ils sont placés dans un élément div, recevront une couleur de police rouge pour le texte (color:red;). Ainsi l'élément i est alors également formaté en rouge, quand il est placé par exemple sous la forme: <div><ul><li><i></i></li></ul></div>. C'est pour cette raison qu'existent la possibilité, à partir de CSS 2.0 de fixer plus précisément à quelles imbrications la définition de format doit s'appliquer.

div > p { color:blue; }
Avec le signe > est établi dans ce sélecteur que l'élément p dans la mesure où il est placé dans un élément div, recevra une couleur de texte bleue (color:blue;). Mais seulement quand l'élément p est placé sous la forme: <div><p></p></div>, donc un niveau à l'intérieur de l'élément div. Dans l'exemple ci-dessus est noté à l'intérieur du passage div, entre autres, également un tableau dans lequel est à nouveau placé un élément p. Là le formatage ne se fait pas dans la couleur bleue parce que l'élément p n'est plus à un niveau d'imbrication à l'intérieur de l'élément div (les éléments de tableau sont placés entre).

div * b { color:violet; }
Avec le signe * est établi dans ce sélecteur que les éléments b, dans la mesure où ils sont placés dans un élément div, recevront une couleur de texte violette (color:violet;). Mais seulement quand l'élément b est placé sous cette forme ou une forme comparable: <div><p><b></b></p></div>, à savoir au moins deux niveaux à l'intérieur de l'élément div. Dans l'exemple ci-dessus différents passages de texte à différents endroits sont marqués avec <b>...</b>. Le premier élément b dans le texte qui est noté d'abord et directement à l'intérieur du passage div, ne reçoit pas encore la couleur violette, mais bien l'élément b suivant dans le même paragraphe, étant donné que cet élément se trouve déjà à deux niveaux à l'intérieur de l'éléments div (l'élément i est placé entre).

div + p { margin-top:100px; }
Avec la signe + est établi dans ce sélecteur que les éléments p qui sont placés immédiatement après un élément div, reçoivent un espace de 100 pixels ave le haut (margin-top:100px;). Dans l'exemple ci-dessus c'est ce qui arrive avec l'avant-dernier élément p. Celui-ci suit immédiatement le passage div. Ne perdez pas de vue que la syntaxe avec le signe plus + ne pouvait être retracé qu'avec Netscape 6.0 et non pas par contre avec l'Explorer Internet 5.5.

Pour les différentes propriétés et leurs valeurs possibles, voir les propriétés CSS.

Définir des formats liés à l'attribut

À l'aide de formats liés à l'attribut vous pouvez mentionner dans des sélecteurs que les définitions de format ne doivent s'appliquer qu'à des éléments avec certains attributs ou même qu'à des éléments dont les attributs se voient affecter des valeurs bien précises.

Exemple:

Exemple d'affichage: aperçu

<html>
<head>
<title>Titre du fichier</title>
<style type="text/css">
<!--
p { font-weight:bold; font-family:Tahoma,sans-serif; font-size:14pt; }
p[align] { color:red; }
p[align=center] { color:blue; text-align:left; }
td[abbr~=Paris] { background-color:#FFFF00 }
*[lang|=en] { background-color:#FF0000; color:#FFFFFF; }
-->
</style>
</head>
<body>
<p>C'est un paragraphe de texte des plus banals.</p>
<p align="right">C'est un paragraphe de texte align&eacute; &agrave; droite.</p>
<p align="center">C'est un paragraphe de texte centr&eacute;? vraiment centr&eacute;?</p>
<table border="1"><tr>
  <th>Paris</th>
  <th>Marseille</th>
</tr><tr>
  <td abbr="Suivent des d'informations sur Paris ">Bien des choses &agrave; dire sur Paris</td>
  <td abbr="Suivent des d'informations sur Marseille">Bien des choses &agrave; dire sur Marseille</td>
</tr></table>
<p>Un paragraphe de texte <span lang="fr">avec du</span> texte <span lang="en">about</span> un <span lang="en-US">English man in New York</span></p>
</body>
</html>

Explication:

Dans l'exemple est notée dans un premier temps une définition de format pour tous les éléments p. Suivent pourtant ensuite deux autres définitions de formats - également pour les éléments p, mais seulement pour ceux qui ont l'attribut align=. Avec la syntaxe p[align] tous les éléments p qui ont l'attribut align, sont concernés. Avec p[align=center] tous les éléments p qui ont l'attribut align="center" dans le repère d'ouverture, sont concernés. Avec td[abbr~=Paris] Sont concernées toutes les cellules de tableau du type td, qui ont l'attribut abbr= auquel la valeur Paris a été affectée. Cette syntaxe trouve l'un de plusieurs mots séparés par des espaces dans les valeurs affectées aux attributs. Avec *[lang|=en] ce sont finalement tous les éléments (l'étoile est le caractère joker pour "tous les éléments") qui sont concernés s'ils ont un attribut universel lang= avec une valeur telle que en ou bien aussi en-US. Cette syntaxe trouve des parties séparées par des traits d'union dans les affectations de valeur aux attributs.

Attention:

Netscape 6.0 interprète ces mentions, l'Explorer Internet pas encore.

Définir des formats pour des classes

Vous pouvez définir des formats pour des classes. Vous pouvez utiliser de telles classes en HTML avec l' attribut universel class=. Vous pouvez ainsi, par exemple pour le titre N°1, créer deux variantes. Pour cela attribuez des noms aux classes.

Exemple:

Exemple d'affichage: aperçu

<html>
<head>
<title>Titre du fichier</title>
<style type="text/css">
<!--
h1 { font-family:Arial,sans-serif; font-size:24pt; font-weight:normal; }
h1.arriereplan { background-color:#FFFF00 }
*.arriereplan { background-color:#00FFFF }
.extra { background-color:#FF99FF }
-->
</style>
</head>
<body>
<h1>H1 tout &agrave; fait normal, seulement un peu format&eacute;</h1>
<h1 class="arriereplan">H1 avec arri&egrave;re plan jaune vif</h1>
<h2>H2 tout &agrave; fait normal <span class="arriereplan">et  <b class="extra">pourtant</b> aussi sur un fond.</span></h2>
</body>
</html>

Explication:

Il existe deux possibilités de noter des classes pour les éléments HTML: soit pour un élément HTML bien précis, soit pour aucun élément précis. Dans chacun des cas, vous déterminez une définition de format pour une classe en notant un point dans le sélecteur et tout de suite après un nom pour la classe. Dans l'exemple ci-dessus une classe nommée arriereplan est adressée avec h1.arriereplan; cette classe ne s'applique qu'aux éléments HTML du type h1: donc par exemple applicables aux éléments tels que <h1 class="arriereplan">. Avec *.arriereplan l'exemple démontre que vous pouvez tout à fait utiliser le même nom de classe encore une fois de façon générale ou pour d'autres éléments. L'étoile est placée comme caractère joker et veut dire ni plus ni moins que "pour tous les éléments". Elle peut tout aussi bien être omise. Dans l'exemple vous pouvez le voir dans .extra. Un élément h1 reçoit donc dans l'exemple les formatages qui ont été déterminés avec le sélecteur h1.arriereplan. Un élément p avec l'attribut <p class="arriereplan"> reçoit par contre les formatages qui ont été déterminés avec *.arriereplan.

Vous pouvez attribuer librement le nom figurant derrière le point. Les noms ne doivent pas être trop longs et ne doivent contenir ni espaces ni caractères spéciaux.

Classes en relation avec les éléments div et span

Les deux éléments HTML div et span ont une signification particulière pour les feuilles de style CSS. La raison en est qu'ils sont eux-mêmes relativement dépourvus de propriétés. La seule différence réside dans le fait que l'élément div imposera un passage à la ligne dans le flux du texte, tandis que span peut être utilisé dans le texte et de ce fait n'a absolument aucune propriété. Quand vous travaillez avec ces éléments, vous pouvez éviter des problèmes qui sont créés par les propriétés de certains éléments réglées par défaut dans le navigateur. Ainsi par exemple les titres peuvent être représentés de façon très différentes d'un navigateur à l'autre en ce qui concerne l'espace qui les suit ou les précède. Si vous voulez contrôler l'apparence de ces éléments, il ne sera pas rare que vous ayez recours aux définitions de format CSS, simplement pour corriger les réglages par défaut automatiques du navigateur pour ces éléments. Pour les éléments div et span par contre vous jouez sur du velours.

L'exemple qui suit montre comment travailler avec les CSS, les classes et ces deux éléments HTML sans propriétés.

Exemple:

Exemple d'affichage: aperçu

<html>
<head>
<title>Titre du fichier</title>
<style type="text/css">
<!--
.body { background-color:#EEEEFF; }
.chap { font-family:Arial,sans-serif; font-size:20pt; color:blue;
      border-bottom-style:solid; border-bottom-width:3px; border-color:red;
      margin:0px; margin-bottom:16px; }
.sect { font-family:Arial,sans-serif; font-size:16pt; color:blue;
      border-bottom-style:solid; border-bottom-width:3px; border-color:red;
      margin:0px; margin-top:24px; margin-bottom:16px; }
.p  { font-family:Arial,sans-serif; font-size:11pt; color:black; margin-top:6px; margin-bottom:6px; }
.rouge   { color:red }
.bleu  { color:blue }
.gras  { font-weight:bold }
.grand   { font-size:14pt }
.petit { font-size:6pt; font-family:'Small Fonts',sans-serif; }
-->
</style>
</head>
<body>
<div class="chap">Un titre de chapitre</div>
<div class="p">Un paragraphe de texte dont la classe porte le m&ecirc;me nom qu'un &eacute;l&eacute;ment HTML :-)</div>
<div class="p">Et pour que l'on puisse aussi tout voir, tout de suite encore un autre</div>
<div class="sect">Un titre de section</div>
<div class="p">Paragraphe avec du <span class="rouge">texte rouge et <span class="gras">en caract&egrave;res gras</span></span> Concluant?</div>
<div class="p">Paragraphe avec du texte<span class="grand">en grands</span> et en <span class="petit">petits</span> caract&egrave;res</div>
</body>
</html>

Explication:

Dans le passage style de l'exemple des classes pour des éléments de votre choix sont définies; les éléments peuvent utiliser ces classes avec class="chap", class="sect" etc... et ainsi recevoir les formats correspondants.

Dans le passage visible du fichier, donc entre <body> et </body>, ne sont notés que des éléments des types div et span exclusivement. Par l'emploi de l'attribut class ces éléments "simulent" d'une certaine façon des éléments de marquage typiques comme des titres de chapitre, des paragraphes de texte et des formatages dans le texte.

Maintenant la discussion est ouverte pour trancher si cette manière de travailler ne représente pas une trahison de l'idée que représente HTML, à savoir l'idée de mettre à disposition un jeu d'éléments importants et typiques pour du texte normal afin d'atteindre une sémantique uniforme "sur la toile" pour le marquage de texte par leur utilisation universelle. D'autre part, il y a également toujours une sémantique quand on marque les éléments conformément aux règles mais en y apportant sa touche personnelle quant à leur interprétation. Car peut-être veut-on dire autre chose par les classes chap et sect dans l'exemple que simplement ce que signifient les éléments HTML h1 et h2. Les éléments dépourvus de propriété div et span se prêtent par exemple particulièrement bien, utilisés avec des noms de classe comme Romeo et Juliette pour marquer les textes des rôles d'une pièce de théâtre. Sous cet angle, les repères div et span en relation avec des noms de classe ne sont plus du tout aussi éloignés des concepts sémantiques, poursuivis par XML.

Définir des formats indépendants

De même que vous pouvez définir des formats pour des classes qui peuvent être adressées en HTML avec l' attribut universel class=, vous pouvez également définir des formats qui sont adressés par l'attribut universel id=. Étant donné que l'affectation de valeur à un tel attribut doit être un nom sans ambiguïté pour tout le document, il s'agit ici simplement d'une définition de format globale pour ce seul élément qui porte ce nom id. Dans les CSS les noms id ne sont cependant pas seulement considérés comme c'est le cas en JavaScript comme identificateurs sans équivoque pour tout le document mais aussi comme identificateurs sans équivoque pour un type d'élément.

Exemple:

Exemple d'affichage: aperçu

<html>
<head>
<title>Titre du fichier</title>
<style type="text/css">
<!--
#passagerouge {
   position:absolute;
   top:130px;
   left:30px;
   width:320px;
   padding:10px;
   margin:0px;
   border:4px solid #EE0000;
}
#passagebleu {
   position:absolute;
   top:130px;
   left:400px;
   width:320px;
   padding:10px;
   margin:0px;
   border:4px solid #0000EE;
}
h1#titre {
   font-family:Arial,sans-serif;
   font-size:24pt;
   font-weight:normal;
   color:green;
}
-->
</style>
</head>
<body>
<h1 id="titre">Ce titre et deux passages positionn&eacute;s</h1>
<div id="passagerouge"><h1>Le passage rouge</h1></div>
<div id="passagebleu"><h1>Le passage bleu</h1></div>
</body>
</html>

Explication:

Dans l'exemple, trois formats indépendants sont définis: Tout d'abord deux formats indépendants avec les noms #passagerouge et #passagebleu. Ces formats commencent donc par le signe dièse # suivi d'un nom. Un élément HTML qui utilise ce nom comme valeur affectée à l'attribut id, se verra alors affecter les formats correspondants. L'exemple ci-dessus montre un exemple typique d'utilisation de format indépendant, à savoir la définition de formats pour des passages positionnés de façon absolue (position:absolute;).

De plus a été défini un format indépendant avec le sélecteur h1#titre. C'est une syntaxe qui n'est apparue qu'avec CSS 2.0. Avant le signe dièse qui caractérise un format indépendant, est noté un élément HTML, dans l'exemple donc h1 pour les titres N°1. Derrière le signe dièse vient encore le nom du format indépendant. Dans l'exemple, la définition de format ne sera employée que si il y a dans le fichier HTML un élément h1 avec l'attribut id="titre". Si par contre il y a par exemple un élément div avec id="titre", la définition de format y serait ignorée.

Attention:

Les formats indépendants avec le type d'élément qui précède sont reconnus par l'Explorer Internet 5.x et par Netscape 6.0, mais pas par les versions précédentes.

Définir des pseudo-formats

Vous pouvez définir des pseudo-formats pour des composantes HTML qu'il est pourtant impossible d'exprimer par un élément HTML sans équivoque, par exemple un "lien qui n'a pas encore été visité" ou bien la "première lettre d'un paragraphe". Pour définir de tels pseudo-formats il y a une syntaxe déterminée.

Exemple:

Exemple d'affichage: aperçu

<html>
<head>
<title>Titre du fichier</title>
<style type="text/css">
<!--
 a:link { color:#EE0000; text-decoration:none; font-weight:bold; }
 a:visited { color:#EEAAAA; text-decoration:none; font-weight:bold; }
 a:hover { color:#EE0000; text-decoration:none; background-color:#FFFF99; font-weight:bold; }
 a:active { color:#0000EE; background-color:#FFFF99; font-weight:bold; }
 body { font-family:Arial,sans-serif; font-size:12pt; }
-->
</style>
</head>
<body>
<p>
Sans doute connaissez-vous la <a href="../../index.htm">page d'ent&ecirc;te de chapitre sur les CSS</a><br>
et aussi la <a href="../../../index.htm">page d'accueil &agrave; SELFHTML</a><br>
Mais connaissez-vous aussi l'<a href="../../../introduction/hypertexte/histoire.htm">histoire de l'hypertexte</a>?<br>
ou bien l'<a href="../../../xml/regles/arborescence.htm">arborescence d'un fichier  XML</a>?
</p>
</body>
</html>

Explication:

Pour les pseudo-formats, notez d'abord le repère HTML concerné, dans l'exemple le repère a pour les liens suivi d'un caractère ":" et d'une mention valide, dans l'exemple: link (pour des cibles de liens pas encore visitées), visited (pour des cibles de liens déjà visitées), hover (pour des liens sur lesquels l'utilisateur passe avec la souris) et active (pour des liens sur lesquels on clique). Attention: ce ne sont pas des noms que vous pouvez choisir librement mais des mots clés invariables.

Il y a toute une série de pseudo-formats établis autorisés. Ceux-ci sont décrits en relation avec les propriétés CSS dans la partie traitant des Pseudo-formats.


	Formater directement des éléments HTML
	Incorporer des feuilles de style en HTML

SELFHTML/Aides à la navigation

Feuilles de style CSS

Définir des formats CSS